Draw element border (animation)
<p>I'm trying to figure out a way to have a button animate its border as if someone was drawing it. </p>

<p>Closest I've gotten so far is this snippet, all though it doesn't work well with border-radius set. (watch the corners)</p>

<p><a href="https://codepen.io/anon/pen/MbWagQ" rel="nofollow noreferrer">https://codepen.io/anon/pen/MbWagQ</a></p>

<pre><code>&lt;button class="draw"&gt;draw&lt;/button&gt;

//Colors
$cyan: #60daaa;
$red: #f45e61;

// Basic styles
button {
  background: none;
  border: 0;
  box-sizing: border-box;
  color: $red;
  font-size: inherit;
  font-weight: 700;
  padding: 1em 2em;
  text-align: center;
  margin: 20px;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &amp;::before,
  &amp;::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.draw {
    transition: color 0.25s;
    border-radius: 7px;

  &amp;::before,
  &amp;::after {
    border-radius: 7px;
    border: 3px solid transparent; // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    width: 0;
    height: 0;
  }

  // This covers the top &amp; right borders (expands right, then down)
  &amp;::before {
    top: 0;
    left: 0;
  }

  // And this the bottom &amp; left borders (expands left, then up)
  &amp;::after {
    bottom: 0;
    right: 0;
  }

  &amp;:hover {
    color: $cyan;
  }

  // Hover styles
  &amp;:hover::before,
  &amp;:hover::after {
    width: 100%;
    height: 100%;
  }

  &amp;:hover::before {
    border-top-color: $cyan; // Make borders visible
    border-right-color: $cyan;
    transition:
      width 0.25s ease-out, // Width expands first
      height 0.25s ease-out 0.25s; // And then height
  }

  &amp;:hover::after {
    border-bottom-color: $cyan; // Make borders visible
    border-left-color: $cyan;
    transition:
      border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
      width 0.25s ease-out 0.5s, // And then exanding width
      height 0.25s ease-out 0.75s; // And finally height
  }
}
</code></pre>

<p>I'm trying to avoid using svg files, preferably I'd like to do this in pure html &amp; css but javascript is okay.</p>