title: CSS- Clip-Path border not working
body: <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>