How to make a curved border with css?

Question

I hope somebody can help me. I found a lot of pages with informations about border-radius, but nothing with this kind of border I need. Is it possible with css?

Thanks in advance.

Answer 1

You can do it with box-shadow. If you set a color to your element and use box-shadow as white it will look just like border and you can play with it pretty easily.

.slider {
  height: 500px;
  background: grey;
}
.slider .slide {
  height: 200px;  
  background-color: white;
  border-radius: 100%/0 0 300px 30px;
  box-shadow: 0px 44px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>