how to make rounded or custom border radius css

December 20, 2021

I was searching for website references and found a website with a cool image header.
here is the image header from the website

It has border-radius on the bottom left and bottom right corner, so make the image looks so cool.
I’ve tried using border-bottom-left-radius and border-bottom-right-radius. but it doesn’t look the same. here is code that I’ve tried

#image-header{
   height:100px;
   width:500px;
   border-bottom-left-radius: 2rem;
   border-bottom-right-radius: 2rem;
   background:green;
}

Can I achieve this only using CSS?

>Solution :

Here is how you can do it:

#image-header {
  height: 100px;
  width: 500px;
  background: green;
  border-radius: 60% / 20%;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}