border-radius：左上 右上 右下 左下（就是顺时针）
如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4）
1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;)
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
2、border-radius: 2em 10em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 10em;
3、border-radius: 2em 10em 5em;
等价于：
border-top-left-radius: 2em;
border-top-right-radius: 10em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 10em;
4、border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
重点来了，最后一种用法
如图：
例子2：
border-radius: 2em 1em 4em / 0.5em 3em;
补齐4个角就是 border-radius: 2em 1em 4em 1em/ 0.5em 3em 0.5em 3em;
每一个角有2面，比如说左上角，有个top面和一个left面。
分解出来就是：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
以左上角为例子：
小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius: 2em 1em 4em / 0.5em 3em;
}
</style>
</head>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
</html>效果：
总结：可以用css画一些复杂的效果图，下面链接大神画的小猪佩奇，css真是无所不能。
链接描述
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。