How Can I Create a Concave Border Effect in CSS?

Using Gradients to Create a Concave Effect

In CSS, border-radius is a powerful tool for adding curves to an element's edges. However, it's limited to creating convex borders, where the curve bulges outward. What if you want a concave border, where the curve dips inward?

Example: Convex Border

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

Attempted Solution

To create a concave border, you might try using negative values for border-radius. However, this approach doesn't work in CSS.

Solution: Radial Gradients

While you can't create a true concave border with CSS alone, you can simulate the effect using radial gradients. Gradients allow you to create smooth transitions between colors, and by using multiple gradients, you can create the illusion of a curved edge.

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 CSS creates two radial gradients that overlap to form a concave edge. The first gradient starts with a transparent circle at -20% and transitions to a solid #888888 color at 100%. The second gradient does the same, but from 120%.

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