Search code examples
htmlcssimage-clipping

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

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 :)

Solution

  • 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).