title: Is a rounded corner square box with image cropped to square in webkit possible?
body: <h2>Use Case</h2>
  
  <p>Show a photo uploaded by the user in a square box with rounded corners. The image will have a landscape aspect ratio, but it needs to be cropped to square to fit inside the the container. We have decided to show only the right side of the photo (making the left side of the photo no longer visible).</p>
  
  <p>Assume the following</p>
  
  <ul>
  <li>The photo cannot be pre-processed, I am looking for a CSS only solution</li>
  <li>The photo can be scaled up/down to fit in the required space</li>
  <li>The photo must maintain its original aspect ratio (and cannot be stretched to fit)</li>
  </ul>
  
  <h2>Example Code</h2>
  
  <p>See this fiddle for a demonstration
  <a href="http://jsfiddle.net/rrbZg/" rel="nofollow">http://jsfiddle.net/rrbZg/</a></p>
  
  <pre><code>&lt;style&gt;
  .croppedPhoto {
      margin: 20px;
      width: 200px;
      height: 200px;
      overflow: hidden;
      position: relative;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
  }
  
  .croppedPhoto img {
      height: 200px;
      position: absolute;
      right: 0;
  }
  &lt;/style&gt;
  &lt;div class="croppedPhoto"&gt;
    &lt;img src="/some/random/photobucket/url"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>The Problem</h2>
  
  <p>Chrome and Safari show the image with square corners and does not show rounded corners at all.</p>
  
  <h2>Possible Cause</h2>
  
  <p>It seems webkit will only allow rounded corners on the container and does not apply the rounded corners to children or crop them in any way. This applies to elements with overflow set as hidden.</p>
  
  <h2>What does not work</h2>
  
  <p>You can try setting rounded corners on the image itself. But this doesn't work in my case because that would only put rounded corners on the right side, and square corners on the left. </p>
  
  <p>See the following fiddle to demonstrate:
  <a href="http://jsfiddle.net/VF6m3/" rel="nofollow">http://jsfiddle.net/VF6m3/</a></p>