border-radius 使用之左上、左下、右上、右下分别定义

border-radius 字面意思就是边框的半径长度，即定义元素四个角的设置圆角边框。一般情况下，会直接定义 border-radius 的值。跟其他属性如 margin 、padding 之类一样，border-radius 其实也可以定义四个值，分别表示左上角，右上角，右下角，左下角的圆角半径。

border-radius: 2rem;

等价于

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

这种可以定义组合按钮，比如左右两个按钮，可以设置左侧按钮的左上、左下和右侧按钮的右上、右下，这样组合起来合适（见淘宝的加入购物车和立即购买按钮）。

甚至还可以定义八个值（分别表示）：

border-radius:1rem / 2rem;

等价于

border-top-left-radius: 1em 2em;
border-top-right-radius: 1em 2em;
border-bottom-right-radius: 1em 2em;
border-bottom-left-radius: 1em 2em;

这样可以定义更加细致、特别的圆角。