边框半径 | border-radius

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

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

border-radius: inherit;

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

这是一个简写属性，用来设置border-top-left-radius,border-top-right-radius,border-bottom-right-radius，border-bottom-left-radius。

在border-radius当border-collapse是collapse时，该属性并不适用于表格元素。

和其他简写属性类似，无法为个别值设定为继承，如 border-radius:0 0 inherit inherit，这会覆盖一部分现有定义。在这种情况下只能使用完整属性来指定

初始值	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.
是否是继承属性	no
Percentages	refer to the corresponding dimension of the border box
适用媒体	visual
计算值	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();
正规顺序	the unique non-ambiguous order defined by the formal grammar

• 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 User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter).   [Inherited](inheritance) no   Percentages refer to the corresponding dimension of the border box   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• border-bottom-left-radius：两个绝对<length>或<percentage>

• border-bottom-right-radius：两个绝对<length>或<percentage>

• border-top-left-radius：两个绝对<length>或<percentage>

• border-top-right-radius：两个绝对<length>或<percentage>

Animation type as each of the properties of the shorthand:

• border-top-left-radius：长度，百分比或calc（）;

• border-top-right-radius：长度，百分比或calc（）;

• border-bottom-right-radius：长度，百分比或calc（）;

• border-bottom-left-radius：长度，百分比或calc（）;

Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

border-radius属性被指定为：

• 一，二，三，四<length>或<percentage>值，用于设置角落的单个半径。

• 通过任选地随后“/”之后是一个，两个，三个，或四个<length>或<percentage>值是用来设置一个额外的半径，所以可以有椭圆形的角落。

值

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>定义圆形半径或椭圆的半长轴，半短轴。不能用负值。<percentage>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。

例如：

border-radius: 1em/5em;

/* is equivalent to */

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;

/* is equivalent to: */

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

正式语法

<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%; 

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  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	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-radius' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	41 1 -webkit-	(Yes) (Yes) -webkit-	42 3 1 — 12 -moz-	9	10.54	51 3 -webkit-
Elliptical borders	(Yes)5	(Yes)	3.5	(Yes)	(Yes)	(Yes)6
4 values for 4 corners	4.0	(Yes)	(Yes)	(Yes)	(Yes)	5
Percentages	(Yes)7	(Yes)	48	(Yes)	11.59	5.17

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	2.1 -webkit-	?	(Yes) (Yes) -webkit-	(Yes)2	​	​	​
Elliptical borders	?	?	(Yes)	(Yes)	?	No	?
4 values for 4 corners	?	?	(Yes)	(Yes)	?	No	?
Percentages	(Yes)7	?	(Yes)	(Yes)	?	No	(Yes)7

当前的Chrome和Safari版本会忽略<select>元素上的border-radius，除非-webkit-appearance被覆盖为适当的值。

在Firefox 50之前，圆角（带border-radius）的边框样式总是呈现为如同border-style被设为solid。这已在Firefox 50中修复。

为了符合CSS3标准，Firefox 4更改了<percentage>值的处理以符合规范。通过设定border-radius: 50%；，您可以对任意大小的元素指定椭圆作为边框。如果未设置overflow: visible，Firefox 4还会使圆角裁剪内容和图像。

在版本11.60之前的Opera中，替换元素border-radius不会有圆角。

在Chrome 4之前，斜杠/表示法不受支持。如果指定了两个值，则会在所有四个角上绘制椭圆边框。-webkit-border-radius: 40px 10px;相当于border-radius: 40px/10px;。

在Safari 4.1之前，斜杠/符号不受支持。如果指定了两个值，则会在所有四个角上绘制椭圆边框。-webkit-border-radius: 40px 10px;相当于border-radius: 40px/10px;。

旧版Chrome和Safari版本不支持<percentage>值（2010年11月份修复）。

<percentage> 值在Firefox 4之前以非标准方式实现。水平和垂直半径都与边框的宽度有关。

在11.50之前，Opera中 的<percentage>值的实现是错误的。