How Can I Create Curved Divs Using CSS?

Creating Curved Divs with CSS

You can achieve a curved bottom edge on a div using CSS with the following techniques:

Using Border-radius:

This method involves setting the border-radius property to define the curve's radius. For a curved bottom edge, you can use the following syntax:

border-radius: 0 0 200px 200px;

This will create a div with a bottom edge that curves inward.

Using Radial-Gradient:

If you prefer a transparent curved shape, you can utilize the radial-gradient property:

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

This technique creates a transparent gradient that curves the bottom edge of the div, resulting in a subtle curve effect.

Here's an example HTML code to use with either method:

<div>

For more variations and additional configurations, you can visit the author's website at https://css-shape.com/curved-edge/. Experiment with these techniques to create stunning and visually appealing curved divs.

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