How Can I Create a Curved Bottom Border for a Div Using CSS?

Curving the Bottom Side of a Div with CSS

In web design, creating visually appealing elements is crucial. One such element is a div with a curved bottom side. This effect adds a touch of elegance and interest to web pages.

To achieve this curved bottom effect, several methods can be utilized, one of which involves using radial-gradient. This technique allows for the creation of a transparent, curved shape.

Implementation with Radial-Gradient

1. HTML: Create a container div with the desired dimensions, such as 500px width and 200px height.

<div class="container"></div>

2. CSS: Apply the following styles to the container div:

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

The radial-gradient property creates a gradient that starts from the bottom of the div and fades out to transparent. The 110% value ensures the gradient extends slightly beyond the div's width, resulting in a curved effect.

This code produces a container with a curved bottom edge that is initially transparent but transitions to light blue. The curve is subtle and adds a touch of sophistication to the element.

Enhancements

For more customization options, the CSS-Shape website offers various variations of curved edge effects using different techniques. By experimenting with these methods, web designers can create captivating and engaging layouts that elevate the user experience.

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