CSS3 border-radius property
Examples
Div element to add rounded borders:
{
border:2px solid;
border-radius:25px;
}
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
| Attributes | |||||
|---|---|---|---|---|---|
| border-image | 4.0 -webkit- | 9.0 | 4.0 -moz- | 5.0 -webkit- | 10.5 -o- |
Attribute definitions and instructions
border-radius property is a can specify up to four border - * - radius properties of the composite properties
Note: This property allows you to add elements rounded borders!
| Defaults: | 0 |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object object.style.borderRadius = "5px" |
grammar
Note: The order of the four values of each radius are: the top left, top right, bottom right corner, lower left corner.If you omit the lower left corner, the upper right corner is the same. If you omit the lower right corner, upper left corner is the same. If you omit the upper right corner, upper left corner is the same.
| 值 | 描述 |
|---|---|
| length | 定义弯道的形状。 |
| % | 使用%定义角落的形状。 |
Example 1
is equivalent to:
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
Example 2
is 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;
related articles
CSS3 tutorial: CSS3 Border
