How Can I Create Inset Border-Radius Using Only CSS3?

Inset Border-Radius with CSS3

In CSS3, achieving inset border-radius, where the corners are curved inward rather than outward, can be challenging without using images. However, there's a clever solution that utilizes CSS3 gradients.

Lea Verou's ingenious approach involves creating a series of transparent gradients with curves, creating the illusion of inset border-radius. By positioning these gradients precisely, you can achieve the desired rounded corners effect.

Her CSS code, as seen below, defines a custom class for an element with the desired inset border-radius:

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

Applying this class to an element will result in an element with inset border-radius. It's important to note that this technique relies on support for rgba and gradients, making it a progressive enhancement strategy. For older browsers or browsers that don't support gradients, an image-based fallback is recommended for providing support.

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