将圆角半径/圆角应用于元素的内容不填充

Question

我有一个元素想要添加一个圆角半径（圆角），但仅在内容本身上，而不是填充。 border-radius似乎没有任何允许此操作的选项（名称有意义）。

即围绕下面图像的蓝色部分而不是绿色部分的角。

由于某些原因，我无法在元素周围包裹另一个div作为填充。

UPDATE上下文是该元素是拖放元素的放置区域。当另一个元素被拖动并悬停在其顶部时，该元素的内容（蓝色区域）会更改颜色。我想要一个较大的填充，以便放置区域非常大，而只有较小的内容区域会在发生悬停时更改颜色。

Answer 1

除了边界以外，没有其他方法可以将边界半径应用到边界上。最好的选择是将<span>放在内容周围。跨度被设置为与它们内部的任何div内联，并且跨度本身应该对样式的影响最小，然后可以按需要使用边界半径。

<div>

Answer 2

玩背景。这是基于此<div><span class="content">content goes here</span></div>

的想法

previous answer

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid yellow;
  padding:10px;
  border-radius:10px; 
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,green 100%) top left    /25px 25px  content-box,
   radial-gradient(farthest-side at top    right,transparent 98%,green 100%) bottom left /25px 25px  content-box,
   radial-gradient(farthest-side at bottom left ,transparent 98%,green 100%) top right   /25px 25px  content-box,
   radial-gradient(farthest-side at top    left ,transparent 98%,green 100%) bottom right/25px 25px content-box,
   linear-gradient(blue,blue) content-box,
   linear-gradient(green,green) padding-box;
  background-repeat:no-repeat;
}

蓝色是内容区域，绿色是填充区域，黄色是边框。