CSS3 Tutorial-border-radius Properties

In the previous article, we give you the main explanation of the CSS3 tutorial-the border, by the way simple to mention the border of the 3 kinds of properties, the next Tracy sister to introduce CSS3 Tutorial-border-radius properties, this property is one of the properties of the border, in the front-end development work will be used frequently. Welcome everyone to come to know.

Let's look at an example first:

To add a rounded border to a DIV element:

DIV{BORDER:2PX solid;border-radius:25px;}

Browser support:

ie9+, Firefox 4+, Chrome, Safari 5+, and Opera support Border-radius properties.

Definition and Usage:

The Border-radius property is a shorthand property for setting four Border-*-radius properties.

Tip: This property allows you to add rounded borders to elements!

Grammar:

Border-radius:1-4 length|%/1-4 length|%;

Note: Set the four values for each radii in this order. If Bottom-left is omitted, it is the same as top-right. If Bottom-right is omitted, it is the same as Top-left. If Top-right is omitted, it is the same as Top-left.

Example 1

Border-radius:2em;

Equivalent to:

Border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em; Border-bottom-left-radius:2em;

Example 2

Border-radius:2em 1em 4em/0.5em 3em;

Equivalent to:

Border-top-left-radius:2em 0.5em;border-top-right-radius:1em 3em;border-bottom-right-radius:4em 0.5em; Border-bottom-left-radius:1em 3em;

The above is the content of CSS3 Tutorial-border-radius property, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

