Border radius to create curved div

Question

I am working on a screen where I need cards which has curved edges. I tried border radius which applies radius to all the edges.

I have attached a reference image. Any suggestion on how effectively border radius can be used for this.

Thanks in advance.

Answer 1

This would be my approach. Keep in mind the size values are not accurate, you would need to fit the correct sizing and proportions.

.container{
  display: flex;
  background: transparent;
  justify-content: space-between;
  position: relative;
  border-radius: 15px;
}
.bigasscontainer{
  width: 100px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
#thumbs-icon{
  border-radius: 0 15px 15px 0;
  background: #ffffff;
  padding: 0.5rem;
}
#backdrop{
  background: #cfdefd;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#camera-icon{
  flex: 5;
  align-self: center;
  text-align: end;
  background: #cfdefd;
  padding: 0.5rem;
  border-radius: 15px 15px 0 0;
}
#backdrop{
  background: #cfdefd;
  position: absolute;
  content: "";
  left: 15px;
  top: 15px;
  z-index: -1;
  width: 50px;
  height: 50px;
}
.text-container{    
  background: #cfdefd;
  border-radius: 15px 0 15px 15px;
  padding: 1rem;
}
body{
  zoom:2;
}

<div class="bigasscontainer">
  <div class="container">
    <span id="thumbs-icon">  </span>
    <span id="camera-icon">  </span>
    <span id="backdrop"> </span>
  </div>
  
  <div class="text-container">
    <span> Impressive Camera </span>
    <span> exceptional photo & video<br> 
    quality, advanced features</span>
  </div>
</div>