The Scenario
Consider the following HTML+CSS setup: an img element wrapped in a div container with rounded corners (and optionally, a drop shadow); the div is sized to match the image’s dimensions, like so:
<!-- HTML --> <div class="rounded"> <img src="…" height="50" width="100" /> </div>
/* CSS */
div.rounded {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
height: 50px;
width: 100px; }
The Problem
If you’ve been playing around with CSS3 long enough, chances are you’ve already encountered this common problem: the corners of the image don’t get clipped by the container, although the container’s corners are rounded. A perfectly logical outcome, considering the box model behavior and element hierarchy, but in most cases, it’s not what we want for our layout. Continue reading ‘CSS3 Rounded Corners: Avoiding Image Clipping Problems’