border-radius
=============

CSS 属性 **`border-radius`** 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

尝试一下
----

该属性是一个 简写属性，是为了将这四个属性 `border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` (en-US)，和 `border-bottom-left-radius` 简写为一个属性。

即使元素没有边框，圆角也可以用到 `background` 上面，具体效果受 `background-clip` 影响。

当 `border-collapse` 的值为 `collapse` 时，`border-radius` 属性不会被应用到表格元素上。

*radius*
![all-corner.png](/zh-CN/docs/Web/CSS/border-radius/all-corner.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框四角的圆角半径。只在单值语法中使用。
 *top-left-and-bottom-right*
![top-left-bottom-right.png](/zh-CN/docs/Web/CSS/border-radius/top-left-bottom-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左上角和右下角的圆角半径。只在双值语法中使用。
 *top-right-and-bottom-left*
![top-right-bottom-left.png](/zh-CN/docs/Web/CSS/border-radius/top-right-bottom-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。
 *top-left*
![top-left.png](/zh-CN/docs/Web/CSS/border-radius/top-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左上角的圆角半径。只在三值或四值语法中使用。
 *top-right*
![top-right.png](/zh-CN/docs/Web/CSS/border-radius/top-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右上角的圆角半径。只在四值语法中使用。
 *bottom-right*
![bottom-rigth.png](/zh-CN/docs/Web/CSS/border-radius/bottom-right.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框右下角的圆角半径。只在三值或四值语法中使用。
 *bottom-left*
![bottom-left.png](/zh-CN/docs/Web/CSS/border-radius/bottom-left.png)
 可以是 `<length>` 或者 `<percentage>`，表示边框左下角的圆角半径。只在四值语法中使用。
 `inherit`
 表示四个值都从父元素计算值继承。

`<length>`

`<length>` 定义圆形半径或椭圆的半长轴，半短轴。负值无效。

`<percentage>`

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。

例如：


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

/\* 等价于： \*/

border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```



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

/\* 等价于： \*/

border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `border-top-left-radius`: `0`
* `border-top-right-radius`: `0`
* `border-bottom-right-radius` (en-US): `0`
* `border-bottom-left-radius`: `0`
 |
| 适用元素 | all elements; but User Agents 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.. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| Percentages | refer to the corresponding dimension of the border box |
| 计算值 | as each of the properties of the shorthand:* `border-bottom-left-radius`: two absolute `length`s or `percentage`s
* `border-bottom-right-radius` (en-US): two absolute `length`s or `percentage`s
* `border-top-left-radius`: two absolute `length`s or `percentage`s
* `border-top-right-radius`: two absolute `length`s or `percentage`s
 |
| Animation type | as each of the properties of the shorthand:* `border-top-left-radius`: a length, percentage or calc();
* `border-top-right-radius`: a length, percentage or calc();
* `border-bottom-right-radius` (en-US): a length, percentage or calc();
* `border-bottom-left-radius`: a length, percentage or calc();
 |

形式语法
----
```

border-radius =   
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

示例
--
```

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre
>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
  </pre
>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre
>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
  </pre
>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
  </pre
>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre
>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre
>
```


```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

### 在线示例

* 示例 1：http://jsfiddle.net/Tripad/qnGKj/2/
* 示例 2：http://jsfiddle.net/Tripad/qnGKj/3/
* 示例 3：http://jsfiddle.net/Tripad/qnGKj/4/
* 示例 4：http://jsfiddle.net/Tripad/qnGKj/5/
* 示例 5：http://jsfiddle.net/Tripad/qnGKj/6/
规范
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-radius |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 与 border-radius 相关的 CSS 属性：`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` (en-US)、`border-bottom-left-radius`、`border-start-start-radius`、`border-start-end-radius`、`border-end-start-radius`、`border-end-end-radius`