没问题，这个问题其实是关于**同心圆角（Inner Rounded Corners）**的计算，完全可以只通过原圆角半径和边框宽度来推导，不需要额外参数。

核心原理 #

当你给元素添加边框时，边框是绘制在元素内容区外围的。如果直接给边框设置和内容区相同的圆角半径，边框的内边缘圆角会比内容区的圆角小（差值等于边框宽度），导致两者不同心，视觉上错位。

要实现同心效果，我们需要让边框的内边缘圆角半径等于内容区的圆角半径。而边框的内边缘圆角半径 = 边框外圆角半径 - 边框宽度，反过来就能推导出边框需要的圆角半径。

计算公式 #

假设：

• R = 内容区的圆角半径（你的场景中是5）
• W = 边框宽度
• R_border = 需要设置的边框外圆角半径

那么公式非常简单：

R_border = R + W

举个你的场景例子 #

比如你的边框宽度是2px，内容区圆角半径是5px：

• 如果边框圆角设为5px，内边缘圆角就是 5 - 2 = 3px，和内容区的5px圆角不同心；
• 按照公式设置边框圆角为 5 + 2 = 7px，此时内边缘圆角就是 7 - 2 = 5px，刚好和内容区的圆角对齐，形成完美的同心效果。

注意点 #

如果你的“50x50”是包含边框的整体尺寸，内容区的实际尺寸是 50 - 2*W，但这并不影响圆角的计算逻辑——只要保证内容区的圆角半径是你想要的同心内圆角，边框圆角就用上述公式计算即可。

内容的提问来源于stack exchange，提问作者Gabriel Stein