title: CSS rounded corner element fails in IE11
body: <p>I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.</p>
  
  <p>This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)</p>
  
  <p>Is there a way to create a workaround for IE11?</p>
  
  <pre><code>.RoundedElement {
    width: 0;
    height: 0;
    border-top: none;
    border-bottom: 50px solid transparent;
    border-right: 20px solid #00a2d4;
    position: relative;
    right: 20px;
    border-radius: 15px 0px 0px 15px;
   border-color: #F7A824;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/QbjaOG" rel="nofollow">http://codepen.io/anon/pen/QbjaOG</a></p>