is it possible to achieve an image clipping/masking effect with html + css3?
- by sa125
Hi - 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 :)
