Can You Create a Concave Border Radius with CSS?

Exploring the Boundaries of CSS Border Radii: Achieving Concave Effects

The flexibility of CSS border-radius allows for the creation of various border styles. While convex borders are easily attainable, the question arises: is a concave border radius possible?

Attempts and Limitations

Initial attempts to create a concave border radius by using negative values for border-radius proved fruitless. This inability stems from the nature of border radii, which inherently represent a curve that extends outward from the edge.

Gradient-Based Illusion

While true concave rounded borders are not achievable using conventional border-radius alone, it is possible to give the illusion of concavity through the clever use of radial gradients.

Consider the following example:

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

This technique creates two radial gradients: one positioned at the left edge and the other at the right. The gradients gradually fade from transparent to the background color, giving the illusion of an inwardly curving border.

Browser Compatibility Considerations

It's important to note that radial-gradients require vendor prefixes for compatibility with older browsers. Webkit browsers, for instance, require the following prefixes:

<code class="css">background:
  -webkit-radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
  -webkit-radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);</code>

By combining radial gradients with careful positioning, you can create the impression of concave border radii, adding a touch of dimensionality to your web designs.

The above is the detailed content of Can You Create a Concave Border Radius with CSS?. For more information, please follow other related articles on the PHP Chinese website!