我一直在研究支持webkit和IE9+的虚线边框。
目前，我有一个“简单”的虚线边框效果，如下所示：
目前，我有一个“简单”的虚线边框效果，如下所示：
.bord {
height: 200px;
width: 300px;
background: gray;
border-radius: 20px;
position: relative;
}
.bord:before {
content: "";
position: absolute;
height: calc(90% - 10px);
width: calc(90% - 10px);
left: 5%;
top: 5%;
border: 5px dotted black;
}<div class="wrapper">
<div class="bord"></div>
</div>这将在Chrome中呈现：
但我想要：
使用纯CSS是否可能实现这一点？
（因为我不能使用border-image，因为Internet Explorer 10及更早版本不支持border-image属性。）
我已经查看了文档，但没有找到任何参考资料，我也看到了这个之类的东西，但显然对我没有帮助。
我是否遗漏了某个CSS属性？或者有其他的可能性吗？（在我看来，这些“点”本应该是圆形的），但“圆形点”也会很有用。