CSS3:CSS3 rounded Corners

YLBTECH-CSS3:CSS3 rounded Corners

1. back to top

1, CSS3Rounded CornersCSS3 rounded Corners

Using the CSS3 Border-radius property, you can make a fillet for any element.

CSS3 Round Corner Maker

Browser support

The number in the table represents the version number of the first browser that supports the property.

The number in front of-webkit-or-moz-indicates that the first version of the prefix is supported.

Properties
Border-radius	9.0	5.0 4.0-webkit-	4.0 3.0-moz-	5.0 3.1-webkit-	10.5

CSS3 Border-radius Properties

Using the CSS3 Border-radius property, you can make a fillet for any element.

Here are three examples:

1. Specify the fillet of the elements of the background color:

Round Corners!

2. Specify the fillet of elements for the border:

Round Corners!

3. Specify the fillet of elements for the background picture:

Round Corners!

The code is as follows:

Instance

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

Try it? CSS3 Border-radius-Specify each fillet

If you specify only one value in the Border-radius property, 4 rounded corners are generated.

However, if you want to specify one by one on Four corners, 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, 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: Four fillet values are the same

Here are three examples:

1. Four values-border-radius:15px 50px 30px 5px:

2. Three values-border-radius:15px 50px 30px:

3. Two values-border-radius:15px 50px:

The following is the source code:

Instance

#rcorners4{Border-radius:15px 50px 30px 5px;background:#8AC007;padding:20px;width:200px;Height:150px; }#rcorners5{Border-radius:15px 50px 30px;background:#8AC007;padding:20px;width:200px;Height:150px; }#rcorners6{Border-radius:15px 50px;background:#8AC007;padding:20px;width:200px;Height:150px; }

Try it?

You can also create oval corners:

Instance

#rcorners7{Border-radius:50px/15px;background:#8AC007;padding:20px;width:200px;Height:150px; }#rcorners8{Border-radius:15px/50px;background:#8AC007;padding:20px;width:200px;Height:150px; }#rcorners9{Border-radius:50%;background:#8AC007;padding:20px;width:200px;Height:150px;}

Try it? CSS3 Fillet Properties

Properties	Description
Border-radius	Abbreviations for all four corner Border-*-*-radius properties
Border-top-left-radius	Defines the radian in the upper-left corner
Border-top-right-radius	Defines the radian in the upper-right corner
Border-bottom-right-radius	Defines the radian in the lower right corner
Border-bottom-left-radius	Defines the radian in the lower left corner

2.

2. back to top

3. back to top

4. back to top

5. back to top

1, HTTP://WWW.RUNOOB.COM/CSS3/CSS3-BORDER-RADIUS.HTML2,

6. back to top

Ylbtech Source: http://ylbtech.cnblogs.com/ This article is copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

CSS3:CSS3 rounded Corners