How to get elliptical corners with css to get a "flower petal shape"

user_1737290 0
Viewed 114

I was wondering how to convert this shape to css.

enter image description here

my attempt at it is not so accurate:

https://codepen.io/glooxbox/pen/KKZywQy

#box {
  width: 350px;
  height: 300px;
  background: red;
  border-radius: 60% 60% 4% 60%;
}
css
1 Answers

You can also set top-left | top-right | bottom-right | bottom-left. This is used to set an additional radius which allows you to have elliptical corners.

#rectangle {
  width: 350px;
  height: 300px;
  background: red;
  /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
  border-radius: 60% 60% 10% 60% / 60% 60% 60% 60%;
}
<div id="rectangle">

</div>

This will work border-radius: 60% 60% 10% 60% / 60%;. See border-radius

user_143498080
Related