Detailed explanation of the implementation method and usage of CSS3 border-radius rounded corners

In the past, it was quite troublesome to achieve rounded corners, but now with CSS3, achieving rounded corners has become so simple that it only requires one sentence: border-radius. Below Qingdao Star Network will share with you the specific usage of border-radius.

CSS3 rounded corners only require one property to be set: border-radius (which means "border radius"). You provide a value for this property to set the radius of all four corners at the same time. All legal CSS metrics can be used: em, ex, pt, px, percentages, etc.

Browser support for border-radius

IE 9, Opera 10.5, Safari 5, Chrome 4, and Firefox 4 all support the border-radius property.

Earlier versions of Safari and Chrome support the -webkit-border-radius property.

Earlier versions of Firefox supported the -moz-border-radius property.

At present, in order to ensure compatibility, you only need to set -moz-border-radius and border-radius at the same time.

-moz-border-radius: 15px;
border-radius: 15px;

(Note: border-radius must be declared last, otherwise it may be invalid.)

Additionally, early versions of Firefox used a single rounded corner syntax that differed slightly from the standard syntax.

-moz-border-radius-topleft (Standard syntax: border-top-left-radius)
-moz-border-radius-topright (standard syntax: border-top-right-radius)
-moz-border-radius-bottomleft (standard syntax: border-bottom-left-radius)
-moz-border-radius-bottomright (standard syntax: border-bottom-right-radius)

Example of border-radius

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-radius - specifies the rounded corners of each

If you specify only one value in the border-radius property, then four rounded corners will be generated.

However, if you want to specify the four corners one by one, you can use the following rules:

Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.

Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner

Two values: The first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner

One value: All four corners have the same rounded value

CSS3 border-radius single rounded corner setting

In addition to setting the rounded corners of four corners at the same time, you can also set each corner individually. Corresponding to the four corners, CSS3 provides four separate properties:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

This concludes this article on the implementation and usage of CSS3 border-radius rounded corners. For more relevant CSS3 border-radius rounded corners content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!