title: rounded corners cropping
body: <p>I am having issues with rounding corners, they keep wanting to crop off on the left side by a few pixels.  Below is the code I am using.  I've tried increasing numbers and decreasing numbers; I've added a wrapper; I've tried all different solutions I can find for searching, but it still crops off. Can anyone give me a hand since I don't seem to be very handy?  And apparently I can't post a picture of what it looks like either.</p>
  
  <pre><code>&lt;style&gt;
  .image 
  {
      width: 200px;
      position:relative;
      -webkit-border-radius: 14px;
      -moz-border-radius: 14px;
      -khtml-border-radius: 14px;  
      border-radius: 14px;
      overflow: hidden;
  }
  
  #slideshow 
  {
      margin:0 0 0 0;
      position:relative;
      width:200px;
      height:133px;
      padding: 10px;
      overflow:hidden;
      -webkit-border-radius: 14px;
      -moz-border-radius: 14px;
      -khtml-border-radius: 14px; 
      border-radius: 14px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
  }
  
  #slideshow &gt; div 
  {
      position:absolute;
  }
  &lt;/style&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(function() {
      $("#slideshow &gt; div:gt(0)").hide();
      setInterval(function() 
      {
          $('#slideshow &gt; div:first')
              .fadeOut(2000)
              .next()
              .fadeIn(2000)
              .end()
              .appendTo('#slideshow');
      }, 3000);
  });
  &lt;/script&gt;
  
  
  &lt;div id="slideshow"&gt;
      &lt;div class="image"&gt;&lt;img alt="" class="icon-action" src="img url" width="200"/&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;img alt="" class="icon-action" src="img url" width="200"/&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;img alt="" class="icon-action" src="img url" width="200"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>