Rounded dotted border spacing in css

Question

I've been researching dotted borders that support webkit and IE 9+.

I currently have a 'simple' dotted border effect like so:

.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>

which renders (in chrome):

---

But i would like:

Would this be possible using pure css?

(since I can't use border-image as Internet Explorer 10 and earlier versions do not support the border-image property.)

I've looked at the docs but couldn't see any reference, and I've seen stuff like this, but obviously doesn't help me here.

---

Is there a CSS property I'm missing here? Or an alternative possibility? (IMO, though, these 'dots' should be round anyway) but 'rounded dots' would also be beneficial.

---

Answer 1

This is the closest that I could achieve. It uses multiple box-shadows of a single pseudo-element offset to the required positions.

This can easily be converted to a dotted border also by adding the below line to the pseudo-element.

border-radius: 50%;

Box Shadow is supported in IE9+ also.

Note: This approach would work if you have a fixed height and width. Not the ideal approach but I think this is the most you could achieve using CSS having IE9+ support.

.bord {
    height: 185px;
    width: 250px;
    background: gray;
    border-radius: 20px;
    position: relative;
    padding: 25px;
}
.bord:before {
    position: absolute;
    top: 20px;
    left: 20px;
    content:'';
    background: black;
    height: 5px;
    width: 5px;
    box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;
}

<div class="wrapper">
    <div class="bord">abcd</div>
</div>

---

The following snippet is strictly not an answer to the current question as IE9+ support is specifically mentioned. This was my original answer (wrong) and is retained as a part of the answer to help future readers who may not need IE9 support. This option uses linear-gradient and background-position (both of which can support percentage values) and hence can be more scale-able than the other.

.bord {
  height: 235px;
  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%;
  background: linear-gradient(90deg, black 10%, transparent 10%), linear-gradient(90deg, black 10%, transparent 10%);    
  background-size: 50px 5px;
  background-repeat: repeat-x;
  background-position: 5px 5px, 5px 195px;
}
.bord:after {
  content: "";
  position: absolute;
  height: calc(90% - 10px);
  width: calc(90% - 10px);
  left: 5%;
  top: 5%;
  background: linear-gradient(0deg, black 10%, transparent 10%), linear-gradient(0deg, black 10%, transparent 10%);
  background-size: 5px 50px;
  background-repeat: repeat-y;
  background-position: 5px 0px, 255px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrapper">
  <div class="bord"></div>
</div>