边框半径 | border-radius
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 | | 可以是 |
|---|---|---|
| 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>值的实现是错误的。
