如果想给边框加上圆角，很简单，border-radius属性可以满足你的需要。
但是如果想要一个外边框呢？而且你并不想这个外边框的四角受内边框的影响呢？
简单又暴力的方法就是，俩div套一起。
<div class = "something-meaningful">
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>
.something-meaningful{
background:#655;
padding:.8em;
}
.something-meaningful>div{
background:tan;
border-radius:.8em;
padding:1em;
}
一个有圆角，嵌在没有圆角的里面，配上不同的颜色，堪称完美有没有（手动狗头）
但是！
如果只用一个元素可以吗？
可以。
这个方法用到了两种属性，前一种上一篇说过了，outline，就是制造多重边框的那个，还有一个属性，box-shadow。废话不多说，上代码。
<div class="something-meaningful">
I have a nice subtle inner rounding,
don't I look pretty?
</div>
.something-meaningful {
background:tan;
border-radius:.8em;
padding:1em;
box-shadow:0 0 0 .6em #655;
outline:.6em solid #655;
}
可以看到效果是这样的
基 本 一 致
下面是原理讲解。首先，outline是不会跟着圆角走的（1），而box-shadow则不是，也就是说，我们需要用box-shadow把圆角产生的空白补齐。
另外，box-shadow的取值也很关键，如果取大了，很可能造成渲染异常。个人推荐的范围是圆角半径的一半。至于精确计算，可以使用勾股定理，在此不再赘述。
