Add border to this "shape" - html

Question

I need to add borders to this "shape". It's kinda difficult because the shape is made with the after and before pseudo-elements. I can't find the right way.
What I need to achieve:
The code I have so far:
https://jsfiddle.net/jimmyadaro/xfcjfz3d/
#octagon {
width: 300px;
height: 200px;
background: red;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: block;
}
#octagon:before,
#octagon:after {
content: "";
position: absolute;
left: 0;
right: 0;
}
#octagon:before {
top: 0;
border-bottom: 30px solid red;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
#octagon:after {
bottom: 0;
border-top: 30px solid red;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
<div id="octagon"></div>
I tried with shadows and outlines without success.
Thanks for reading.
Note: I'll use a solid background color, if that matters.

Answer 1

Here's my solution. No solid background color is required. This may or may not suit your actual use case.
JSFiddle
#octagon {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
#octagon:before,
#octagon:after {
content: "";
display: block;
width: 300px;
padding-top: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
z-index: -1;
}
#octagon:before {
background: red;
}
#octagon:after {
background:
linear-gradient(
45deg,
#0e0 calc(50% - 150px + 10px), transparent 0,
transparent calc(50% + 150px - 10px), #0e0 0%),
linear-gradient(
-45deg,
#0e0 calc(50% - 100px + 10px), transparent 0,
transparent calc(50% + 100px - 10px), #0e0 0);
box-shadow: 0 0 0 10px #0e0 inset;
}
<div id="octagon">Hello World!</div>

Answer 2

Well, this is the only way I could think of approaching it in pure CSS:
JSfiddle here: https://jsfiddle.net/xfcjfz3d/7/
body {
background:#fff;
}
#octagon {
position:relative;
width: 300px;
height: 200px;
background: green;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: block;
}
#octagon:before,
#octagon:after {
content: "";
position: absolute;
left: 0;
right: 0;
}
#octagon:before {
top: 0;
border-bottom: 30px solid green;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
#octagon:after {
bottom: 0;
border-top: 30px solid green;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
.tall {
position:absolute;
background:red;
width:230px;
height:190px;
left:35px;
top:5px;
z-index:1;
}
.wide {
position:absolute;
background:red;
width:290px;
height:130px;
left:5px;
top:35px;
z-index:1;
}
.corner {
position:absolute;
background:red;
width:45px;
height:43px;
z-index:1;
transform: rotate(45deg);
}
.topleft {
left:14px;
top:14px;
}
.topright {
//background:black;
left:241px;
top:13px;
}
.bottomleft {
background:red;
left:13px;
top:143px;
}
.bottomright {
background:red;
left:241px;
top:143px;
}
<div id="octagon">
<div class="tall"></div>
<div class="wide"></div>
<div class="corner topleft"></div>
<div class="corner topright"></div>
<div class="corner bottomleft"></div>
<div class="corner bottomright"></div>
</div>