CSS-Learning | 边框border和border-radius属性设置边框半径：圆角

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，每个边框有 3 个方面：宽度、样式，以及颜色。

1. 可以使用border-width一次性设置所有边框的宽度，也可以使用border-top-width这样的方位属性设置某条边框的宽度。
2. 使用border-color设置所有边框的颜色，也可以使用border-left-color这样的方位属性设置某条边框的颜色。
3. 边框的样式可以使用border-style（或border-right-style这样的方位属性）来设置，取值常用solid、dashed或dotted等关键字。不常用的有double、groove和insert。可以通过border-style:none删除全部边框。

border简写属性来设置边框，可以把所有边设置成相同的宽度、样式、颜色，比如border: 2px solid #000;

边框半径：圆角

给border-radius属性一个长度值，就可以一次性设置盒子四个角的半径。

也可以分别设置每个圆角的半径，即从左上角开始，按顺时针方向依次列出各个值：

.box {
	border-radius: 0.5em 2em 0.5em 2em;
}

但是这个例子中表示相应圆角水平和垂直方向拥有相同的半径。如果你想把每个角设置成非对称的，也可以用两组值分别指定两个方向的半径，先水平在垂直，两组值以斜杠分隔：

.box {
	border-radius: 2em .5em 1em .5em / .5em 2em .5em 1em;
}

如果对角的值相同，那就可以省略右下和左下角的值，因为只有两个或三个值的情况下，其他值会自动填入：

.box {
	border-radius: 2em 3em;
}

第一个值设置左上和右下角，第二个值设置右上和坐下角。

最后，也可以使用border-top-left-radius、border-top-right-radius等属性设置某个角的半径。