使用border-radius时背景溢出边框

Question

使用border-radius时，我遇到了溢出它边框的元素的背景颜色问题。我已多次看到这个问题并且不是特例。

以下是描述：

我有<input type="submit">，其中包含以下样式：

background-color: #FF0000;
border: 2px solid #222222;
border-radius: 5px;

如果你看一下图片，那么背景颜色在所有4个圆角处都会溢出一点：

注意：为了更好地查看问题，我使用了浏览器的缩放功能。所以图片比原来的图片略大。

这个问题总是会发生，通常我看不到它，因为我的颜色在相似的范围内，但是当使用完全不同的颜色时，如上图所示，很明显......

我认为这是浏览器（Firefox 30和IE11）中的渲染问题，因为我无法使用Google Chrome看到同样的问题。我如何在Firefox和IE中修复此问题？ （IE并不重要）

Answer 1

要在FireFox中修复此问题，看起来background-clip有一个简单的技巧：

background-clip: padding-box;

Demo

还有另一种使用线性渐变背景的解决方法，我发现将background-repeat设置为no-repeat可以正常工作：

background:linear-gradient(red,red) no-repeat;

Demo 2