CSS- Clip-Path border not working
<p>I am trying to create a shape using CSS clip-path. <strong>jsfiddle</strong> is <a href="https://jsfiddle.net/aqdasiftekhar/wLfwyb1p/1/" rel="nofollow">here</a>.</p>

<p><em>My Code is:</em></p>

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

<pre><code>.kite {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    border: 4px solid # 222; - webkit - clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
    clip - path: polygon(0 0, 52 % 0, 100 % 100 % , 0 52 % );
}
.kite: hover {
    opacity: 0.6;
}

/* Center the demo */
html,
body {
    height: 100 % ;
}
body {
    display: flex;
    justify - content: center;
    align - items: center;
}
</code></pre>

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

<pre><code>&lt;div class="kite"&gt;&lt;/div&gt;
</code></pre>

<p>This shape needs to have a border with black color, but the CSS currently does not create the border for the entire shape but only for the <code>div</code>.</p>