Adding a border to div with top triangle
<p>I'm trying to add a border to div with top triangle </p>

<p>issue is border is not getting applied to the triangle part</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>body {
  background-color: #F3F5F6;
}
.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FFFFFF;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="info-panel"&gt;
  Testing
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I dont want to add a css box shadow. </p>

<p>I need a border. </p>

<hr>

<p><a href="https://jsfiddle.net/yeya6dfa/" rel="noreferrer"><strong>jsFiddle</strong></a></p>