How do I add a border to an (8 point star) css shape?
<p>How do I add a red border outside this 8 point star? Or is there a simple svg solution anyone knows of? </p>

<p><strong>IS:</strong>
<a href="https://i.stack.imgur.com/C31Tv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C31Tv.jpg" alt="enter image description here"></a>
  <strong>NEED:</strong> <a href="https://i.stack.imgur.com/17oM1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17oM1.jpg" alt="enter image description here"></a></p>

<p><a href="https://jsfiddle.net/v9bqahy8/1/" rel="nofollow noreferrer"><strong>JS fiddle</strong></a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="star8"&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#star8 {
 border: 3px solid red;
 background: blue; width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
 }
#star8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 }
</code></pre>