stick's corner » css http://stick.gk2.sk All composite phenomena are impermanent. All contaminated things and events are unsatisfactory. Wed, 01 Feb 2012 17:58:38 +0000 en hourly 1 http://wordpress.org/?v=3.1 Image with rounded corners (using CSS3) http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/ http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/#comments Thu, 26 Mar 2009 11:02:17 +0000 Pavol Rusnak http://stick.gk2.sk/blog/?p=204 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 (-moz-border-radius, -khtml-border-radius and -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 (left 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 (right example).

rounded img rounded div 
<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#1: I reported the issue to Gecko, KHTML and WebKit bugzillas.

Update#2: Dave Hyatt closed the WebKit bug with the comment: “This was fixed recently.” \o/

]]> http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/feed/ 32