How Can I Create an Inset Border Radius Using Only CSS3?-CSS Tutorial-php.cn

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

Patricia Arquette

Release： 2024-12-03 10:46:10

Original

772 people have browsed it

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

Creating Inset Border Radius with CSS3

Traditionally, creating inset borders required images or additional elements. However, CSS3 provides an innovative solution using gradients.

Lea Verou's ingenious CSS suggests using transparent radial gradients positioned at the corners of an element. These gradients mimic curves, giving the illusion of an 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;
}

Copy after login

This method relies on browser support for gradients and rgba, so consider using image-based fallbacks for older browsers.

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