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-radiusborder-top-right-radiusborder-bottom-right-radius,和 border-bottom-left-radius 简写为一个属性。

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

border-collapse 的值为 collapse 时,border-radius 属性不会被应用到表格(

)元素上。
radius all-corner.png 可以是 <length> 或者 <percentage>,表示边框四角的圆角半径。只在单值语法中使用。 top-left-and-bottom-right top-left-bottom-right.png 可以是 <length> 或者 <percentage>,表示边框左上角和右下角的圆角半径。只在双值语法中使用。 top-right-and-bottom-left top-right-bottom-left.png 可以是 <length> 或者 <percentage>,表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 top-left top-left.png 可以是 <length> 或者 <percentage>,表示边框左上角的圆角半径。只在三值或四值语法中使用。 top-right top-right.png 可以是 <length> 或者 <percentage>,表示边框右上角的圆角半径。只在四值语法中使用。 bottom-right bottom-rigth.png 可以是 <length> 或者 <percentage>,表示边框右下角的圆角半径。只在三值或四值语法中使用。 bottom-left bottom-left.png 可以是 <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:
适用元素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.
是否是继承属性
Percentagesrefer to the corresponding dimension of the border box
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

41

1 -webkit-

12

12 -webkit-

42 3

1 — 12 -moz-

910.54

51

3 -webkit-

Elliptical borders Yes5123.5 Yes Yes Yes6
4 values for 4 corners412 Yes Yes Yes5
Percentages Yes71248 Yes11.595.17
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 -webkit- ?

Yes

Yes -webkit-

Yes2 Yes ?
Elliptical borders ? ? Yes Yes No ? ?
4 values for 4 corners ? ? Yes Yes No ? ?
Percentages Yes7 ? Yes Yes No Yes7 ?

1. Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.

2. Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.

3. To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.

4. In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.

5. Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.

6. Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.

7. <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).

8. <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.

9. The implementation of <percentage> values was buggy in Opera prior to 11.50.

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!

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.

另请参阅

文档标签和贡献者

最后编辑者: RainSlide,