is it possible to achieve an image clipping/masking effect with html + css3?

Question

I'm trying to place a nice border around an image that's 250x250, using only html and css. The markup is this:

<div id="img-container"><img src="pic.jpg" border="0"/></div>

And the css is:

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    z-index: 10;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#img-container img {
    z-index: 5;
}

Basically, I want the div container to clip the picture's edges that exceed its boundaries. This will achieve the rounded edges effect using the border-radius property (-moz-border-radius, -webkit-border-radius, etc) - if it actually works or could even be done. Looking for tips and tricks on this. Thanks.

And, yes, I'm obviously not a web designer :)

Answer 1

Yes it's possible, but you should set the image as the div background using CSS:

#img-container {
    height: 225px;
    width: 225px;
    padding: 3px;
    border: 1px solid black;
    background-image: url('pic.jpg');
    border-radius: 10px;
}

This is necessary, otherwise you will get horrible white borders around the image (tested in Google Chrome).

Answer 2

as far as I understood your question, deleting the

#img-container img {
    z-index: 5;
}

part should do the trick.

Or you could use the image as a background image:

#img-container {
    ...
    background: url(pic.jpg) no-repeat top left;
}