显示表格单元格css,CSS在圆圈内绘制圆圈，作为显示表格单元格

我想在戒指内画一个实心圆圈。我让外圈工作得很好，但是内圈正在填满整个圆圈，而我想要几个像素的内部填充。

我认为这很简单但是因为我使用display：table表示容器，table-cell表示内部位填充/ margin不表现为我希望。

示例jsfiddle，https://jsfiddle.net/joshuaohana/5ewemw0q/在此我希望红色内部位不占据整个圆，但它与外边界之间有一些像素间距。

所有表格/表格单元格的原因是可以轻松管理圆圈与其相关标签的垂直对齐。

label

.radio {

display: table;

border-spacing: 10px;

margin: 0 -10px;

}

.radio:before {

display: table-cell;

vertical-align: middle;

height: 20px;

width: 20px;

border: 2px solid blue;

border-radius: 50%;

content: "";

background-color: red;

}

.radio > label {

display: table-cell;

vertical-align: middle;

}

如何让内圈有一些内衬？尝试边距，填充，边框间距等......都无济于事。