Archive for the 'CSS' Category

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’