How Can I Create an Inset Border-Radius Using CSS3 Gradients?

Inset Border-Radius Using CSS3 Gradients

Achieving an inset border-radius without images is possible through the use of CSS3 gradients. This approach involves layering several transparent radial gradients to create the illusion of an inwardly curved border around an element.

The following CSS code employs Lea Verou's solution to create an inset border-radius using gradients:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

In this code, multiple transparent radial gradients are positioned at specific points around the element to create the illusion of an inward curve. The result is a set of transparent gradients with curves, producing an inset border-radius effect.

It's important to note that this solution requires support for RGBA and gradients, which may not be supported by all older browsers and requires progressive enhancement or an image-based fallback for older browsers that don't support gradients.

The above is the detailed content of How Can I Create an Inset Border-Radius Using CSS3 Gradients?. For more information, please follow other related articles on the PHP Chinese website!