How Can You Create a Concave Border Radius with CSS?

Concave Border Radius: An Illusion with Radial Gradients

Achieving a concave border radius with CSS alone may seem like an impossible task, given that negative border-radius values produce no effect. However, there's a clever workaround using radial gradients.

To create the illusion of a concave border, we can employ multiple radial gradients positioned around the edges of our element. Here's an 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>

By carefully positioning the radial gradients and adjusting their radii, we can create the effect of a concave border, as demonstrated in the provided image. It's important to note that support for radial gradients varies across browsers, and older browsers may require additional syntax to ensure compatibility.

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