border-radius

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

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

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

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

当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格（

）元素上。

radius

可以是 <length> 或者 <percentage>，表示边框四角的圆角半径。只在单值语法中使用。 top-left-and-bottom-right

可以是 <length> 或者 <percentage>，表示边框左上角和右下角的圆角半径。只在双值语法中使用。 top-right-and-bottom-left

可以是 <length> 或者 <percentage>，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 top-left

可以是 <length> 或者 <percentage>，表示边框左上角的圆角半径。只在三值或四值语法中使用。 top-right

可以是 <length> 或者 <percentage>，表示边框右上角的圆角半径。只在四值语法中使用。 bottom-right

可以是 <length> 或者 <percentage>，表示边框右下角的圆角半径。只在三值或四值语法中使用。 bottom-left

可以是 <length> 或者 <percentage>，表示边框左下角的圆角半径。只在四值语法中使用。 inherit 表示四个值都从父元素计算值继承。

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

例如:

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;

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;

Formal syntax

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where 
<length-percentage> = <length> | <percentage>

示例

  border: solid 10px;
  /* the border will curve into a 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

在线示例

示例 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/

注意

在 Gecko 中，点状和虚线状圆角边框被渲染为了实线 bug 382721.
当表格元素的 border-collapse 为 collapse 时 border-radius 不会生效。
旧版本 WebKit 对于多重值有不同的处理方式，见下。

规范

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

初始值	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `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`: 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`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Desktop
Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2.0) 1.0 (1.7 or earlier)-moz (en-US)	4.0 0.2-webkit (en-US)	9.0	10.5	5.0 3.0-webkit (en-US)
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 (en-US)	未实现	未实现	2.1-webkit (en-US)
Elliptical borders	?	未实现	未实现	?
4 values for 4 corners	?	未实现	未实现	?
Percentages	?	未实现	未实现	?

`<percentage>` 值

在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中实现有问题。
Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
在旧版本的 iOS (iOS 5 之前) 和 Android 中 (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

旧版本的 Safari 和 Chrome (532.5 之前)

只支持单值设定四个角。必须使用完整值来设置不同角。

不支持斜杠 / 符号，如果指定了两个值，那么四个角都为椭圆角.

/* 它们是等价的 */

-webkit-border-radius: 40px 10px;
        border-radius: 40px/10px;

Opera notes

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

另请参阅

与 border-radius 相关的 CSS 属性：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius