How to add a border to the border?
<p>I have the following item whose pointed area is created using border. I need to place a border on this border. I have tried using shadow but it does not solve the problem.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hexagon"&gt;</code></pre>
</div>
</div>
</p>

<p>If I'm changing the values of <code>border-left</code>, <code>border-right</code> or <code>border-top</code> in percentages, it doesn't work.</p>

<p>Edit:</p>

<p>Here is what I am trying to achieve. A white area which is rectangular on top pointed downwards at bottom and has a border of a different color. 
<a href="https://i.stack.imgur.com/OEj40.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OEj40.png" alt="enter image description here"></a></p>