I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance

.wrapper {
  
}

.content-card {
  width: 315px;
  height: 131px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

    <div >
      <div >
        
      </div>
    </div>

CodePudding user response：

If You Have this design You Can Use CSS Image Border
For More information
Look at CSS Image Border Section : https://blog.hubspot.com/website/css-border

CodePudding user response：

The old way - border-image

It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

The recent way - without image

You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.

body {
  background-color: #ffaaaa;
}

.ticket {
  position: relative;
  width: 300px;
  height: 170px;
  margin: 10px;
  border-radius: 10px;
  background: white;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}

.ticket:before,
.ticket:after {
  content: '';
  position: absolute;
  top: 5px;
  width: 6px;
  height: 160px;
}
  
.ticket:before {
  left: -5px;
  background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
  
.ticket:after {
  left: 300px;
  background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}

<div ></div>