How Can I Create Curved Bottom Edges in DIVs Using CSS?

Create Curved Bottom Edges in DIVs Using CSS

To achieve the desired curved bottom edge on a rectangle div, follow these steps:

Using border-radius

The border-radius property can create rounded corners. By specifying varying radius values for the top and bottom corners, you can create a curved bottom edge.

.curved {
  margin: 0 auto;
  height: 400px;
  background: lightblue;
  border-radius: 0 0 200px 200px;  
}

Using Radial Gradient

If you prefer a transparent curved shape, you can use a radial gradient:

body {
  background: pink;
}

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

These methods provide two different ways to achieve the desired curved bottom edge, allowing you to customize the effect to suit your design needs.

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