Can CSS Create Concave Border Radius?

Concave Border Radius: Is It Possible with CSS?

In CSS, the border-radius property allows us to create rounded corners. However, the default effect is convex, meaning the corners are rounded outwards. Is it possible to achieve a concave border radius, where the corners are rounded inwards?

While it's not directly possible with pure CSS, we can simulate the effect of a concave border radius using background gradients. Here's how it works:

1. Create two radial gradients that simulate the desired concave shape.
2. Position and repeat these gradients to cover the desired area.

For example:

#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;
}

This code creates the illusion of a concave border radius by overlaying two radial gradients that both start from and end at the background color of the element. The starting points of the gradients are positioned at -20% and 120% of the width of the element, respectively, creating the concave effect.

Note that this technique may not be supported in all browsers, so browser compatibility should be taken into consideration if implementing it in production.

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