title: Create border arround special beveled css shape?
body: <p>I want to create a border that goes around a beveled corner as shown below.</p>
  <p><a href="https://i.stack.imgur.com/alYme.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/alYme.png" alt="enter image description here" /></a></p>
  <p>The current code I have for creating the beveled corners is:</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>.contact {
      flex-grow: 2;
      z-index: 2;
      position:relative;
      display: block;
      margin: 40px 40px;
      padding: 60px; 
      text-align: center;
      background-color: #343434;
  }
  
  .bevel {
      overflow:hidden;
      clip-path: polygon(
          0 10%,
          10% 0,
          90% 0,
          100% 10%,
          100% 90%,
          90% 100%,
          10% 100%,
          0% 90%,
          0% 10%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="contact" class="contact bevel"&gt;
    &lt;!-- content makes up width and height --!&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have no idea how to make the border, the way I am doing the bevel is also an issue because it is a percentage and not pixels, which makes it look weird. I also need the border to work on a shape with just one beveled corner.</p>
  <p>Thank you</p>