有必要专门为border写一篇。
因为很多细节我真的不知道。

border-radius

可以这么写：
border-radius: 10px; 表示四角都为10px

可以这么写：
border-radius: 10px 20px 30px 40px; 四个值指定的依次为左上， 右上， 右下， 左下

可以这么写：
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
这个同上面意思一样

还可以这么写：
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
这个同上面的意思还是一样。 但是如果两个值设置的不一样， 那就不一样了。
例如：

 .wrapper{
           width: 200px;
           height: 100px;
           border: 1px solid #000;
           border-top-left-radius: 200px 100px;
           border-bottom-right-radius: 200px 100px;
       }

拿 border-top-left-radius来说， 它定义了左上角的圆角半径， 包括左上角左侧的边的圆角， 右侧边的圆角， 设置一个值的时候， 二者相同， 两个值的时候， 各用各的。

最后， 还可以这么写：
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
/ 分开两堆数，第一对表示top-left, 第二对top-right, 以此类推

box-shadow

box-shadow: h, v, b, s, c
h: 水平偏移量
v: 垂直偏移量
b: 模糊半径 沿着元素影子的四个边同时向两边模糊
s: 扩散距离 沿着原来元素影子四个边同时扩大/缩小设置的大小
c: 阴影颜色
* 默认为 outset， 即外阴影， 要设置内阴影， 在最前/后面加 inset

如图所示： 延伸了 20px, 设置的模糊为 40px， 在延伸了 20px的边界处还是向里和向外模糊了 40px
可是这并没有完， border-radius都能整出那么多东西，这个也不例外：

.wrapper{
           width: 150px;
           height: 150px;
           border: 0;
           position: absolute;
           left: calc(50% - 50px);
           top: calc(50% - 50px);
           box-shadow: inset 0px 0px 10px #fff,
                        3px 0px 10px #f0f,
                        0px -3px 10px #0ff,
                        -3px 0px 10px #00f,
                        0px 3px 10px #ff0;
       }

为了便于查看， 将其放在了黑色背景下

但是有一个很明显的问题， 尽管设置了 border：0, 但是可以看到 border依然存在。 chrome, safari中都是如此。其实不是因为 border的原因， 也不是 bug， 这是因为设置了内阴影， 从边框开始模糊， 越靠近边框， 就越接近纯白色， 看起来就好像是多了一个 border, 如果去掉内阴影， 就消失了。

.wrapper{
           width: 300px;
           height: 300px;
           border: 1px solid #fff;
           position: absolute;
           left: calc(50% - 150px);
           top: calc(50% - 150px);
           border-radius: 50%;
           box-shadow: inset 0px 0px 50px #fff,
                       inset 10px 0px 80px #f0f,
                       inset -10px 0px 80px #0ff,
                       inset 10px 0px 300px #f0f,
                       inset -10px 0px 300px #0ff,
                       0px 0px 50px #fff,
                       -10px 0 50px #f0f,
                       10px 0px 50px #0ff;
       }

.wrapper{
           width: 50px;
           height: 50px;
           border: 1px solid #fff;
           position: absolute;
           left: calc(50% - 25px);
           top: calc(50% - 25px);
           border-radius: 50%;
           background: #fff;
           box-shadow: 0px 0px 100px 50px #fff,
                       0px 0px 250px 125px #ff0;
       }

注意： 阴影在文字下面， 在背景上面。

border-image

border-image-source: 指定图片的路径 url(./demo.png)
按照如图的方式， 将 border-image切割成9块， 每一块放到对应的位置上。
border-image-slice: 10, 这个 10其实是四个值的简写， 这四个值分别对应了如图四条线距离图片边缘的距离。只有数字， 没有单位 px, 加上也不好使。如果某个边设置的与众不同， 那么默认将会被拉伸， 这时候就是另外一个属性 border-image-repeat在起作用， 默认值是 strech。
border-image-slice的默认值是100%， 就是距离边缘 100%, 等于图片的宽度， 四条线都这样的话， 截出来的效果就是图片本身的样子。 从使用的效果上来看， 它是把边框图片缩放成 border的宽度大小， 然后在四个角上分别放置一张这个缩放了的图片。还有一个值 fill但是一般不用， 因为它会将内容区填充。其实本身这个边框图片属性也用的少。

border-image-repeat： strech, round, repeat, space
设置repeat的效果：

改变元素的宽度，将中间的东西填充， 不够就复制， '按需复制', 差多少补多少， 但是难看的要命。
设置 round的效果：

改变元素的宽度， 如果不够再复制一个中间填充物（白色小块）的宽度， 就将已有的拉伸， 等够再复制一个的宽度的时候， 复制添加一个进来， 再继续改变宽度， 继续拉伸， 复制。。。

设置round的效果同round类似， 但是不会拉伸， 不够距离的时候， 就空着， 已填充的小白块居中。距离够了添加一个进来。

设置round的效果就是将中间的一直拉伸拉伸。。。
border-image-repeat可以设置两个参数， 属性值四选二或者四选一， 选二的时候第一个代表水平方向， 第二个代表垂直方向的repeat方式。