CSS中的边框与圆角

1、边框半径：圆角

            .profile-photo {
                width: 400px;
                min-height: 600px;
                position: absolute;
                bottom: -60px;
                left: 5%;
                top: 0;
                background: url(login.jpg);
                background-color: #fff;
                border: 1px solid #777;
                border-radius: 0.5em;
            }

2、更复杂的圆角语法

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

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

如果希望每个角设置成非对称的，也可以使用两组值分别指定两个方向的半径，先水平再垂直，两组值以斜杠分隔：

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

如果对角的值一样，则可以简写：
只写左上和右上的值即可

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

第一个值等价于左上和右下的值，第二个值为右上和左下角的值。

同时也可以只去设置一个角的半径的值，列如配合使用border-top-left-radius、border-top-right-radius、等属性去设置某个角的一样的值。
列如：只设置左上角

.box   {
  border-top-left-radius: 2em;
}

3、创建正圆和胶囊形状

如果两个圆角的弧线相交，那么两个轴向就会分别缩小半径，直到圆弧不再相交，对于方形元素的对称圆角而言，任何大于50%的值都会得到圆形，对于圆角半径一样的一个矩形元素而言，结果则会是椭圆。

.round {
  width: 300px;
  height:300px;
  border-radius:50%;
  background-color: #59f;
}

椭圆形修改为胶囊形状，圆角弧线为保证不相交会自动缩小半径，而在使用长度值时，半径并不相对于元素大小而缩小，最终会得到对称的效果，因此，在实现胶囊形状结构，只需要指定任意一端比所需要的半径大的，得到一个半圆形。

            .round {
                width: 400px;
                height: 100px;
                border-radius: 999em;
                background-color: darkmagenta;
            }


             <div class="round"></div>