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

Simulating Inset Border-Radius with CSS3 Gradients

Achieving an inset border-radius effect purely with CSS3 poses a challenge. However, using CSS3 gradients, you can simulate the desired effect.

Lea Verou's Gradient Solution

Lea Verou devised an innovative solution that utilizes four transparent radial gradients positioned at opposite corners of the element.

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

These gradients create a set of transparent curves that resemble an inset border radius. You can adjust the colors and radii to create different styles.

Browser Support and Fallback

This technique depends on support for RGBA and gradients, which are not supported in older browsers, particularly Internet Explorer. Therefore, it's crucial to use this solution as a progressive enhancement or provide an image-based fallback for legacy browsers.

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