有时我们需要一个容器，只有在内侧有圆角，而border和outline的四个角在外部仍然保持直角的形状。

一般的方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>边框内圆角</title>
  <style>
    .something-meaningful{
      width: 200px;
      height: 100px;

      background: #655;
      padding: .6em;

    }

    .something-meaningful > div{
      background: tan;
      border-radius: .8em;
      padding: 1em;
    }
  </style>
</head>
<body>
  <div class="something-meaningful">
    <div>
      I have a nice subtle inner rounding,
      don't I look pretty?
    </div>
  </div>
</body>
</html>

这个方法挺不错的，但在这里我们用到了两个元素，有没有办法可以只使用一个元素达成相同的效果呢？

方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>边框内圆角</title>
  <style>
    div{
      width: 200px;
      height: 100px;

      background: tan;
      border-radius: .8em;
      padding: 1em;
      box-shadow: 0 0 0 .4em #655;
      outline: .6em solid #655;
    }
  </style>
</head>
<body>
  <div>
      I have a nice subtle inner rounding,
      don't I look pretty?
  </div>
</body>
</html>

这里需要注意的是虽然outline不会跟着元素的圆角走，但是box-shadow是会的，这里我们用box-shadow填补border和outline之间的空隙，组合在一起就产生了我们想要的效果。

但这里需要注意的是到底多大的box-shadow投影扩张可以填补这些空隙？

这里我们的圆角半径是r，所以最小的扩张值是r（√2-1），最大不能超过outline的宽度。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

每天一个CSS小技巧-边框内圆角（css中怎么样设置边框为圆角的）

方案