How Can I Create Uneven Rounded Corners on a Div Using CSS?

Uneven Rounded Sides on a Div: Achieving Asymmetry with CSS

Creating uneven rounded sides on a div necessitates a different approach from using border-radius. While border-radius enables equal curvature on all sides, we'll explore an alternative solution that grants finer control over the shape.

Introducing clip-path, a CSS property that empowers you to clip an element's shape according to specific parameters. This property operates by drawing geometrical shapes around an element, effectively masking any portions that lie outside the defined shape.

Code Example

The following code demonstrates how to create a div with uneven rounded sides using clip-path:

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

<div class="box">

</div>

Explanation

In the CSS code:

• circle(75% at 65% 10%) defines the shape as a circle with a radius of 75% the height and width of the div.
• The at keyword specifies the position of the circle's center as 65% from the left and 10% from the bottom.
• This creates a circle that only partially overlaps the div, resulting in the desired asymmetrical rounded sides.

This solution provides greater flexibility and allows you to create a wide range of non-symmetrical shapes for your divs.

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