CSS3 Hexagon with dotted border

Question

I could achieve a hexagon with solid border as below:

.hex {
  margin-top: 70px;
  width: 208px;
  height: 120px;
  background: red;
  position: relative;
}
.hex:before,
.hex:after {
  content: "";
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  position: absolute;
}
.hex:before {
  top: -59px;
  border-bottom: 60px solid red;
}
.hex:after {
  bottom: -59px;
  border-top: 60px solid red;
}
.hex.inner {
  background-color: lightgreen;
  -webkit-transform: scale(.98, .98);
  -moz-transform: scale(.98, .98);
  transform: scale(.98, .98);
  z-index: 1;
}
.hex.inner:before {
  border-bottom: 60px solid lightgreen;
}
.hex.inner:after {
  border-top: 60px solid lightgreen;
}

<div class="hex">
  <div class="hex inner">
  </div>
</div>

However, I would like to create a hexagon with a dotted border as seen in the image below:

Answer 1

Here is an approach with an inline svg using:

• the polygon element for the hexagon shape
• stroke-dasharray for the dotted border (control of the size and space between dots)
• stroke-linecap for the dotted border

svg{width:30%;margin:0 auto;}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon fill="#92D050" 
           stroke="red"
           stroke-width="1"
           stroke-linecap="round"
           stroke-dasharray="0.5,3"
           points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>