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>

Answer 2

Love the SVG solutions (@web-tiki and @Harry) but here's an CSS solution using 3 rectangles:

.main{
  padding: 50px;
  position: relative;
}

.a, .b, .c{
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 70px;
  background-color: green;
  border-left: 2px dotted red;
  border-right: 2px dotted red;
}

.a{
  z-index: 1;
}

.b{
  transform: rotate(60deg);
  z-index: 2;
}

.c{
  transform: rotate(120deg);
  z-index: 3;
}

<div class="main">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

JSFiddle

---

A solution using only one HTML element:

body{
  padding: 50px;
}

.hex, .hex:before, .hex:after{
  width: 120px;
  height: 70px;
  background-color: green;
  border-left: 2px dotted red;
  border-right: 2px dotted red;
}

.hex:before, .hex:after{
  content: '';
  position: absolute;
  bottom: 0;
}

.hex{
  z-index: 1;
  position: relative;
}

.hex:before{
  transform: rotate(60deg);
  z-index: 2;
}

.hex:after{
  transform: rotate(120deg);
  z-index: 3;
}

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

JSFiddle

Answer 3

You are unable to create a dotted border using the method given in question because there the shape itself is created using borders. The border-top and border-bottom that produce the hexagon. When you set the dotted border-style to it, all you'd get is very large dots that wouldn't be like the expected output. While you can use other CSS methods to create the required shape + border (like described in other answers), it is better to use SVG for such complex shapes because it is easy.

You can do this easily with SVG using a single path element. The path is simple to create once you have a good understanding of the commands that are used in creating it.

Below is an explanation:

• M5,30 - This command Moves the imaginary pen to the point represented by (5,30).
• L50,0 - This draws a Line from the previous point (5,30) to the point (50,0).
• 95,30 95,70 50,100 5,70 - These are same as the previous commands and draw lines to the respective points. The command (L) itself need not be repeated as it is the same.

The dotted border is achieved by setting the correct values for the stroke-dasharray and stroke-linecap properties (as mentioned in web-tiki's answer).

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: green;
  stroke: red;
  stroke-dasharray: 0.1, 3;
  stroke-linecap: round;
}

<svg viewBox='0 0 100 100'>
  <path d='M5,30 L50,0 95,30 95,70 50,100 5,70z' />
</svg>

Answer 4

Html Code:

<div class="hexagon"><span></span></div>

Css code :

  .hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: lightgreen;
  margin: 86.60px 0;
   border-left: 3px dotted #f00;;
  border-right:3px dotted #f00;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 40.9340px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before {
  top: -106.0660px;
  border-top: 3px dotted #f00;
  border-right:3px dotted #f00;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: 3px dotted #f00;
  border-left: 3px dotted #f00;
}

/*cover up extra shadows*/
.hexagon span {
  display: block;
  position: absolute;
  top:1.7320508075688772px;
  left: 0;
  width:294px;
  height:169.7410px;
  z-index: 2;
  background: inherit;
}

output :

Apply color as you nedd.