border-radius - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

该属性是一个 简写属性，是为了将这四个属性 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 lengths or percentages border-bottom-right-radius: two absolute lengths or percentages border-top-left-radius: two absolute lengths or percentages border-top-right-radius: two absolute lengths or percentages
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();

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 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!

• Desktop
• Mobile

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	未实现	未实现	2.1-webkit
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