Александр Александр - 6 months ago 24
CSS Question

How to set smooth border-radius more than 50%

I have a problem with border radius.

i need set border radius such as this

enter image description here

Css border radius such as

border-top-right-radius: 46%;
border-top-left-radius: 21%;


give me bad result. Is it any way to make smooth radius?

Answer

you may cut off your borders with 2 values for each corners, you can also use pixel units

html {
  background:#023C5C;
}

div {
  text-align:center;
  background:#007EAA;
  min-height:200px;
  border-radius: 400px 70px 0 0 / 100px 10px 0 0;
  width:500px
}
<div></div>