How do I give a CSS octagon shape a full border?

Question

I am trying to take this css Octagon and give it a solid red border. However, when i add the border it only works on portion of the shape. Does anyone have a solution for this?

Here is a JS FIDDLE

HTML

<div class='octagonWrap'>
      <div class='octagon'></div>
  </div>

CSS

.octagonWrap{
        width:200px;
        height:200px;
        float: left;
        position: relative;
        }
    .octagon{
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: hidden;
        }
    .octagon:before {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform: rotate(45deg);
        background: #777;
        content: '';
        border: 3px solid red;
        }

Answer 1

You can modify your own code to work with this. Right now, you have rules for .octagon that should be for .octagon-wrapper, and rules for .octagon::before that should be for .octagon. Just shift the CSS rules and have them apply to their parents, while changing the border property of .octagon::before to inherit from .octagon.

.octagonWrap {
    width:200px;
    height:200px;
    float: left;
    position: relative;
    overflow: hidden;
}
.octagon {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: #777;
    border: 3px solid red;
}
.octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,
     * but if the border were 5px, then it'd be -5px.
     */
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
}

<div class='octagonWrap'>
    <div class='octagon'></div>
</div>

Answer 2

SVG solution

I do not know if using svg is an option,
If it is here is how simple it is done.

<svg viewBox="0 0 75 75" width="200px">
  <path d="m5,22 18,-18 28,0 18,18 0,28 -18,18, -28,0 -18,-18z" stroke="red" stroke-width="2" fill="black" />
</svg>

Answer 3

You could use an online calculator (or calculate it manually) to compute the size in which the ratio of the side, and overall height needs to be.

Then by using some pseudos and a span element, you could create this shape via:

.oct {
  height: 241px;
  width: 100px;
  background: none;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 10px solid tomato;
  border-bottom: 10px solid tomato;
  margin: 100px auto;
  transition: all 0.8s;
}
.oct:before,
.oct:after,
.oct span {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  border: inherit;
  top: -10px;
  z-index:-1;
}
.oct:before {
  left: -100%;
  transform: rotate(-45deg);
  transform-origin: top right;
}
.oct:after {
  left: 100%;
  transform: rotate(45deg);
  transform-origin: top left;
}
.oct span {
  height: inherit;
  width: inherit;
  background: inherit;
  transform: rotate(90deg);
}
.oct:hover {
  transform: rotate(180deg);
}

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

Answer 4

Imagine those red lines extending until they touch each other. That square (rotated 45%) has a complete border, you just don't see the "cut off" corners due to the overflow: hidden;

This seems to work (but does so by adding two extra divs, so there may be a better way):

<div class='octagonWrap'>
  <div class='octagon'></div>
  <div class='vert'> </div>
  <div class='hort'> </div>
</div>

and then add tihs css:

.vert {
     position: absolute;
     left: 60px;
     border-top: 3px solid red;
     border-bottom: 3px solid red;
     height: 194px;
     width: 80px;
 }
 .hort {
     position: absolute;
     top: 60px;
     border-left: 3px solid red;
     border-right: 3px solid red;
     width: 94px;
     height: 80px;
 }

Answer 5

You should try using the HTML5 canvas element. You should be able to draw the polygon and then add a stroke to it.

Answer 6

You can do that very effectively with clip-path

.octagonWrap {
  background: red;
  width: 200px;
  height: 200px;
  position: absolute;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.octagon {
  position: relative;
  background: gray;
  width: 190px;
  height: 190px;
  top: 5px;
  left: 5px;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

<div class="octagonWrap">
  <div class='octagon'></div>
</div>