title: Safari bug with border radius, rounded corners, and strange background repeat
body: <p><a href="http://jsfiddle.net/7KDr8/7/" rel="noreferrer">http://jsfiddle.net/7KDr8/7/</a></p>
  
  <p>Using Safari 6.0.1, and the following styles, my buttons are rendering in a "buggy" fashion:</p>
  
  <p>This bug only happens in Safari.</p>
  
  <p><img src="https://i.stack.imgur.com/nGNhS.png" alt="enter image description here"></p>
  
  <pre><code>.btn {
      height: 40px !important;
      line-height: 40px !important;
      overflow: hidden;
      padding: 0 20px;
      text-align: center;
      margin: 0 auto;
      float: left;
      margin-bottom: 40px;
      background-color: #15518d;
      background-repeat: no-repeat !important;
      border-bottom: 4px solid #032a52 !important;
      text-shadow: 0 0 3px rgba(0,0,0,.2);
      color: #fff !important;
      font-weight: 500;
      font-size: 15px !important;
      border-radius: 4px;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      text-transform: none !important;
      cursor: pointer
  }
  </code></pre>
  
  <p>As you can see, the right border of the button seems to start to "repeat" and the left border of the button has some of the color from what is supposed to only be in the bottom.</p>
  
  <p>Has anyone encountered this bug before or know a fix? Thanks!</p>