需求

做一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。

通俗做法

用两个元素来实现这个效果：

// css
.meaningful {
	width: 200px;
	background: #389e0d;
	padding: 0.8em;
}
.meaningful > div {
	background: #595959;
	border-radius: 1em;
	padding: 1em;
}
// html
<div class="meaningful">
	<div>我的边框内是圆角的</div>
</div>

两个元素

缺陷： 使用了两个元素。下面我们使用一个元素来达到这个效果：

采用 outline 与 box-shadow

outline 语法介绍：

outline: width | style | color

outline 简写属性可以用一个、两个或三个值声明，并且它们的顺序可以任意更换。例如：

outline: solid; /* 这仅指定样式值 */ 
outline: dashed #eee; /* 这将指定颜色值和样式值 */
outline: thick inset; /* 这将指定宽度值和样式值 */ 
outline: 1px solid pulm; /* 这将指定所有3个值 */

这里需要注意两点：

当仅指定一个或两个值时，其他值将解析为其默认值。outline 只需设置其 style 值即可工作。
如果未定义样式，许多元素的轮廓将不可见。这是因为样式默认为 none。一个例外是 input 元素，它们由浏览器赋予默认样式。

box-shadow 语法介绍：

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

现在我们采用 box-shadow 与 outline 来实现该功能：

实际上是利用 box-shadow 会跟着元素的圆角走，而描边 outline 不会跟着元素的圆角走。因此，如果我们把这两者叠加到一起， box-shadow 会刚好填补描边和容器圆角之间的空隙。即:

// css
.meaningful {
	width: 200px;
	background: #595959;
	border-radius: 0.8em;
	padding: 1em;
	box-shadow: 0 0 0 0.6em #389e0d;
	outline: 0.6em solid #389e0d;
}
// html
<div class="meaningful">我的边框内是圆角的</div>

outline

但在新版本谷歌浏览器下显示为：

这是由于描边也跟着圆角走。

所以要实现边框内圆角的效果还是采用方法一：采用两个元素比较稳妥。

css 世界之边框内圆角

需求

通俗做法

采用 outline 与 box-shadow