How Can I Create Divs with Unevenly Rounded Corners Using CSS?

Creating Divs with Uneven Rounded Sides

While using border-radius can provide rounded corners to a div, achieving uneven sides requires a different approach. One effective solution is utilizing the clip-path property.

Using clip-path

clip-path allows you to clip a specific shape out of an element, effectively hiding the excess area. To create uneven rounded sides, use a circle shape with its center offset from the edges of the div. For instance:

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

This CSS code defines a "box" with uneven rounded sides:

• The circle shape has a radius of 75%, but its center is offset 65% horizontally and 10% vertically from the top-left corner of the div.
• The "blue" background fills the entire div, but only the area within the circle shape is visible.

By manipulating the values of circle(), you can fine-tune the shape and position of the rounded corners. This approach provides a flexible method for creating custom rounded sides on divs, allowing you to achieve designs like the example you provided.

The above is the detailed content of How Can I Create Divs with Unevenly Rounded Corners Using CSS?. For more information, please follow other related articles on the PHP Chinese website!