How to Create a Curved Bottom for a DIV Using CSS?

Curving the Bottom of a DIV Inward with CSS

To achieve the curved bottom effect as illustrated, one technique involves using border-radius with specific values. Here's how to implement it:

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

This code creates a rectangular DIV with a rounded bottom edge, as shown:

Transparent Curves

Alternatively, a radial gradient can be employed to create a transparent curve:

body {
  background: pink;
}

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

This approach results in a semi-transparent blue shape with a curved bottom.
The above is the detailed content of How to Create a Curved Bottom for a DIV Using CSS?. For more information, please follow other related articles on the PHP Chinese website!

css edge for using this border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn