How do I prevent an image from overflowing a rounded corner box?

css, html

Solution

This may or may not work in your situation, but consider making the image a CSS background. In FF3, the following works just fine:

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

I'm not sure there's another workaround — if you apply a border to the image itself (say, `1em` deep), you get the same problem of square corners.

Edit: although, in the "adding a border to the image" case, the image inset is correct, it's just that the image isn't flush with the `div` element. To check out the results, add `style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"` to the `img` tag (with `width` and `height` set appropriately, if necessary).

Problem

If I use this code, the image isn't clipped by the div's rounded corners (resulting in the image's square corners covering up the div's rounded ones): ``` <div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;"> <img src="big-image.jpg" /> </div> ``` Does anyone know how to get a rounded corder div to prevent a child image from overflowing?

Original source