title: Transparent rounded border in Safari
body: <p>When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap the h1's in a span/div/etc and give that the border, but I'm wondering if anyone knows if it is possible to do this without any more mark up.</p>
  
  <p>Here is the css I'm using: </p>
  
  <pre><code>    h1.inner {
      background: #ffa51f;
      border-top-right-radius: 60px;
      border-bottom-right-radius: 60px;
      border-top: 10px solid rgba(33,33,33,.05);
      border-bottom: 10px solid rgba(33,33,33,.05);
      border-right: 10px solid rgba(33,33,33,.05);
      color: #FFF;
      display: inline-block;
      font-size: 47px;
      font-weight: 800;
      line-height: 1.2;
      padding: 0 .6em 0 0;
      position: relative;
      text-transform: uppercase;
      text-align: left;
      background-clip: padding-box;
      box-sizing: border-box;
  }
  h1.inner:before {
      background: #ffa51f;
      border-top: 10px solid rgba(33,33,33,.05);
      border-bottom: 10px solid rgba(33,33,33,.05);
      content: "";
      position: absolute;
      top: -10px;
      bottom: -10px;
      width: 9999px;
      background-clip: padding-box;
      box-sizing: border-box;
  }
  
  h1.inner:before {
      right: 100%;
  }
  </code></pre>
  
  <p>Below is a jsfiddle and screenshot with an example of what I'm talking about.</p>
  
  <p><a href="http://jsfiddle.net/39Xen/" rel="nofollow">http://jsfiddle.net/39Xen/</a></p>
  
  <p><a href="http://imgur.com/Hp2bzBm" rel="nofollow">http://imgur.com/Hp2bzBm</a></p>