Image with rounded corners (using CSS3)
W3C added nice new options for creating rounded corners of elements to their CSS3 working draft. Engines like Gecko, KHTML and WebKit already implemented these functions, but they use vendor prefixes in the keywords (
-webkit-border-radius respectively), because the feature is not yet fully standardized. That’s also the reason why Opera and Internet Explorer decided not to implement this extension for now.
I was playing with the rounded corners and I like this feature a lot, but I also hit one problem (in all 3 engines). When you use the
border-radius with an
img element, the image is drawn above the border, so it isn’t rounded (top example). Fortunately, the effect could be easily achieved by rounded
div, setting its dimensions exactly to the image size and using the image as the
div’s background (bottom example).
<img style="border: 2px solid black; border-radius: 30px; -moz-border-radius: 30px; -khtml-border-radius: 30px; -webkit-border-radius: 30px;" src="presov.jpg" />
<div style="border: 2px solid black; border-radius: 30px; -moz-border-radius: 30px; -khtml-border-radius: 30px; -webkit-border-radius: 30px; width: 180px; height: 240px; background: url('presov.jpg');" />
Update#2: Dave Hyatt closed the WebKit bug with the comment: “This was fixed recently.” \o/