## Summary

`border-radius` 用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个圆（椭圆）与边框的交集形成圆角效果。

• 默认值 the concatenation of the initial values of its longhand properties:
• `border-top-left-radius`: `0`
• `border-top-right-radius`: `0`
• `border-bottom-right-radius`: `0`
• `border-bottom-left-radius`: `0`
• Applies to all elements; but UA are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.
• 可继承 no
• Percentages refer to the corresponding dimension of the border box
• Media `visual`
• 计算值 as each of the properties of the shorthand:
• `border-bottom-left-radius`: two absolute length or percentages
• `border-bottom-right-radius`: two absolute length or percentages
• `border-top-left-radius`: two absolute length or percentages
• `border-top-right-radius`: two absolute length or percentages
• Animatable as each of the properties of the shorthand:
• `border-top-left-radius`: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• `border-top-right-radius`: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• `border-bottom-right-radius`: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• `border-bottom-left-radius`: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• Canonical order the unique non-ambiguous order defined by the formal grammar

## Syntax

`Formal syntax: `[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?``
```The syntax of the first radius allows one to four values:

The syntax of the second radius also allows one to four values

```

### Values

 radius Is a `` or a `` denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax. top-left-and-bottom-right Is a `` or a `` denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax. top-right-and-bottom-left Is a `` or a `` denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes. top-left Is a `` or a `` denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes. top-right Is a `` or a `` denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax. bottom-right Is a `` or a `` denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes. bottom-left Is a `` or a `` denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax. `inherit` Is a keyword indicating that all four values are inherited from their parent's element calculated value.

### Values

<length>
`<length>` 定义圆形半径或椭圆的半长轴，半短轴。 不能用负值。
<percentage>

<inherit>

For example:

```border-radius: 1em/5em;

/* is equivalent to */

```
```border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

```

## Examples

```  border: solid 10px;
/* the border will curve into a 'D' */
```
```  border: groove 1em red;
```
```  background: gold;
border: ridge gold;
```
```  border: none;
```
```  border: none;
```

## Notes

• Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721.
• `border-radius` does not apply to table elements when `border-collapse` is `collapse`.
• Old versions of WebKit handle multiple values differently, see below.

## Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation

## Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 4.0 (2.0)
1.0 (1.7 or earlier)-moz
4.0
0.2-webkit
9.0 10.5 5.0
3.0-webkit
Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
4 values for 4 corners yes 4.0 yes yes 5.0
Percentages yes
was (see below)
yes yes 11.5 5.1
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support 3.2-webkit Not supported Not supported 2.1-webkit
Elliptical borders ? Not supported Not supported ?
4 values for 4 corners ? Not supported Not supported ?
Percentages ? Not supported Not supported ?

### `<percentage>` values

• are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
• are buggy in Opera prior to 11.50
• are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
• are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)

### Gecko notes

In Gecko 2.0 `-moz-border-radius` was renamed to `border-radius`; `-moz-border-radius` was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

• changes the handling of `<percentage>` values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with `border-radius: 50%;`
• makes rounded corners clip content and images (if `overflow``: visible` is not set)
Note: Support for the prefixed version (`-moz-border-radius`) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

### WebKit notes

Older Safari and Chrome versions (prior to WebKit 532.5)

• support only one value for all 4 corners. For different radii the long form properties must be used
• don't support the slash `/` notation. If two values are specified, an elliptical border is drawn on all 4 corners
```/* this is equivalent: */

```

### Opera notes

In Opera (prior to Opera 11.60), applying `border-radius` to replaced elements will not have rounded corners.

### 附件

all-corner.png
666 字节 2012-02-29 13:58:50 teoli
bottom-left.png
389 字节 2012-02-29 13:58:51 teoli
bottom-rigth.png
475 字节 2012-02-29 13:58:52 teoli
top-left-bottom-right.png
505 字节 2012-02-29 13:58:52 teoli
top-left.png
377 字节 2012-02-29 13:58:53 teoli
top-right-bottom-left.png
550 字节 2012-02-29 13:58:54 teoli
top-right.png
433 字节 2012-02-29 13:58:54 teoli