How Can I Create Uneven Rounded Corners on a Div?

Creating Uneven Rounded Sides on a Div

Challenge: Design a DIV with the following uneven rounded sides:

[Image of DIV with uneven rounded sides]

Current Solution:

Using border-radius, the closest approximation is:

border-bottom-left-radius: 80% 50px;
border-bottom-right-radius: 30% 30px;

But this results in rounded corners that are too uniform.

Solution:

Clip-Path to the Rescue:

To create the desired uneven rounded sides, consider using the clip-path property, which allows for defining a geometric shape that clips the content of an element:

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}

In this code:

• 75% defines the radius of the circle.
• at 65% 10% specifies the center point of the circle relative to the element's container.

HTML Code:

<div class="box">
</div>

The clip-path property will create the desired uneven rounded sides, providing the flexibility to tailor the shape to your specific requirements.

The above is the detailed content of How Can I Create Uneven Rounded Corners on a Div?. For more information, please follow other related articles on the PHP Chinese website!