Html CSS边框元素在wordpress中工作不正常

我正在使用具有以下属性的边框：

 border-left:0.5rem solid #d8f4fd;
   border-right:0.5rem solid #d8f4fd;
   border-bottom:0.5rem solid #2e3d98;
   border-top:0.5rem solid #d8f4fd;

取高度：56px；宽度：56px；边界半径：50%； 我的浏览器正在显示直径为56px+8px+8px的光盘[边框显示在元素外部] 在wordpress中使用相同的方法时，其显示一个直径为56且边框为的元素在元素中显示为

---

我希望边框显示在元素外部。

使用边框半径（像素），如边框半径：28px

额外像素背后的主要原因是您没有使用

display:inline块和
框大小：内容框

因此，如果遵循此代码，则不会获得任何额外像素：

HTML:

这几乎可以肯定，因为元素具有
框大小：边框框而不是默认的
框大小：内容框。这可能来自重置样式表或主题CSS中的其他地方


.bordered{
宽度：56px；
高度：56px；
边界半径：50%；
左边框：0.5rem实心#d8f4fd；
右边框：0.5rem实心#d8f4fd；
边框底部：0.5rem实心#2e3d98；
边框顶部：0.5rem实心#d8f4fd；
}
.内容框{
框大小：内容框；
}
.边框框{
框大小：边框框；
}
内容框：边框将添加到宽度/高度

边框框：边框将包含在宽度/高度中

记住，如果你在Wordpress中工作，请给出一个css！无能的
颜色：#000000！重要的
 如果你想做一个圆，我们会得到一个实例或工作代码，你必须使用
边界半径：50%使其成为圆形。不需要给出像素！
<div class="container">
    <div class="circle"></div>
</div>

.container{
    display: inline-block;
}
.circle{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-block;
    border-top: 5px solid #d8f4fd;
    border-left: 5px solid #d8f4fd;
    border-right: 5px solid #d8f4fd;
    border-bottom: 5px solid #2e3d98;
}