CSS: border-radius

CSS属性border-radius允许你设置元素的外边框圆角。

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

我们先看其中一个属性border-top-right-radius，其他属性同理。

border-top-right-radius用于设置右上外边框圆角。

一个圆角由两个半径确定：水平半径和垂直半径。

当水平半径和垂直半径相等时，可以简写为一个值，格式：border-top-right-radius: ;，此时相等的水平半径和垂直半径确定一个圆形。这个圆与边框的交集形成圆角效果。

圆形圆角

当水平半径和垂直半径不等时，需要分别书写，格式：border-top-right-radius: ;，此时两个半径确定一个椭圆。这个椭圆与边框的交集形成圆角效果。

椭圆圆角

示例：

设置相等的水平半径和垂直半径

相等的水平半径和垂直半径简写为一个值

不等的水平半径和垂直半径

半径的值可以是以px等为单位的长度值，也可以是百分比。当值是百分比时，水平半径相对于盒模型的宽度，垂直半径相对于盒模型的高度。不管是长度值还是百分比值，负值均无效。
示例：

百分比

当只设置了一个圆角时，如果水平半径大于宽或垂直半径大于高，则实际效果会等比缩小水平半径和垂直半径，直至“水平半径等于宽且垂直半径小于等于高”或“垂直半径等于高且水平半径小于等于宽”。
示例：

半径比宽高大

当设置了多个圆角时，如果水平半径之和超过宽或垂直半径之和超过高，则实际效果会等比缩小各圆角半径，直至“水平半径之和等于宽且垂直半径之和小于等于高”或“垂直半径之和等于高且水平半径之和小于等于宽”。其中半径之和是指同一个水平方向或垂直方向上的圆角半径的和；对角线的两个圆角半径之和超出不影响，各自受宽高约束。

比如：

width: 40px;
height: 30px;
border-top-left-radius: 100px 400px;
border-top-right-radius: 500px 300px;
border-bottom-right-radius: 400px 100px;
border-bottom-left-radius: 300px 200px;

那么水平方向上最大的半径之和是700px，垂直方向上最大的半径之和是600px。水平方向半径之和是宽的17.5倍，垂直方向半径之和是高的20倍，所以各半径等比缩小20倍，因此等效于：

width: 40px;
height: 30px;
border-top-left-radius: 5px 20px;
border-top-right-radius: 25px 15px;
border-bottom-right-radius: 20px 5px;
border-bottom-left-radius: 15px 10px;

效果：

半径之和大于宽高

当使用简写属性border-radius时，如果值包含斜线/，那么斜线前的值是水平半径，斜线后的值是垂直半径；如果没有斜线，那么水平半径和垂直半径相同。border-radius四个值分别是top-left、top-right、bottom-right和bottom-left；如果省略了bottom-left，那么bottom-left和top-right值相等；如果省略了bottom-right，那么bottom-right和top-left值相等；如果省略了top-right，那么top-right和top-left值相等。
如：

border-radius: 1px 2px 3px 4px/5px 6px 7px 8px;

等效于

border-top-left-radius:  1px 5px;
border-top-right-radius:  2px 6px;
border-bottom-right-radius:  3px 7px;
border-bottom-left-radius:  4px 8px;

再如：

border-radius: 1px 2px 3px/4px 5px;

等效于

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