 <p>So what's happening is your <code>draw::before/draw::after</code> elements are 0px tall at the start of your transition. That means the border radius is going to be very skewed. </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>button { background: none; border: 0; box-sizing: border-box; color: #f45e61; font-size: inherit; font-weight: 700; padding: 200px; text-align: center; margin: 20px; position: relative; vertical-align: middle; } button::before, button::after { box-sizing: border-box; content: ''; position: absolute; width: 100%; height: 100%; } .draw { -webkit-transition: color 0.25s; transition: color 0.25s; border-radius: 70px; } .draw::before, .draw::after { border-radius: 70px; border: 30px solid transparent; width: 0; height: 0; } .draw::before { top: 0; left: 0; } .draw::after { bottom: 0; right: 0; } .draw:hover { color: #60daaa; } .draw:hover::before, .draw:hover::after { width: 100%; height: 100%; } .draw:hover::before { border-top-color: #60daaa; border-right-color: #60daaa; -webkit-transition: width 1.25s ease-out, height 1.25s ease-out 1.25s; transition: width 1.25s ease-out, height 1.25s ease-out 1.25s; } .draw:hover::after { border-bottom-color: #60daaa; border-left-color: #60daaa; -webkit-transition: border-color 0s ease-out 2.5s, width 1.25s ease-out 2.5s, height 1.25s ease-out 3.75s; transition: border-color 0s ease-out 2.5s, width 1.25s ease-out 2.5s, height 1.25s ease-out 3.75s; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;CSS Border Transitions&lt;/h1&gt; &lt;button class="draw"&gt;draw&lt;/button&gt;</code></pre> </div> </div> </p> <p>After enlarging/slowing down the animation you can see what the issue is. I would also recommend putting a transition on the right/left border until the height is transitioning to avoid the 'drawing point' being a weird shape. </p> <p>Here is another example of what I mean by the border-radius being skewed: </p> <p><a href="https://i.stack.imgur.com/db1rE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/db1rE.png" alt="Skewed"></a></p> <p><a href="http://codepen.io/anon/pen/mOdOyQ" rel="nofollow noreferrer">http://codepen.io/anon/pen/mOdOyQ</a></p>