border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
效果：
二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同
复制代码
.demo {
border-radius: 10px 20px;
}
等价于：
.demo {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
效果：
三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值
复制代码
.demo {
border-radius: 10px 20px 30px;
}
等价于
.demo {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 30px;
}
效果：
四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值
复制代码
.demo {
border-radius:10px 20px 30px 40px;
}
等价于
.demo {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
效果：
从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.
上面四个实例都是水平和垂直半径相等情况下border-radius的应用，下面我们来看几个水平和垂直半径值不一样的实例：
一、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值
复制代码
.demo {
border-radius: 10px / 20px;
}
等价于：
.demo {
border-top-left-radius: 10px20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
}
效果：
