Home > Blog > Image with rounded corners (using CSS3)

Image with rounded corners (using CSS3)
1 star2 stars3 stars4 stars5 stars
(votes: 10, avg: 4.00)
Loading ... Loading ...

March 26th, 2009 Leave a comment Go to comments

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/

Tags: , ,
  1. March 26th, 2009 at 12:39 | #1 | Firefox 3.0.6openSUSE

    Nice :-)

  2. john blythe
    March 26th, 2009 at 18:23 | #2 | Firefox 3.0.7Windows XP

    nifty little option!

  3. March 27th, 2009 at 12:26 | #3 | Firefox 3.0.7Windows XP

    Hopefully that’s a bug at the moment and will be fixed once the final spec is implemented as the box model does specify that the border sits on top of everything else in the box so I wouldn’t have expected that result.

    Do Firefox and Safari both implement this in the same way at the moment?

  4. March 27th, 2009 at 12:30 | #4 | Firefox 3.0.7openSUSE

    @Dave Woods
    I see the same behavior in all 3 engines that implemented this feature. (I added this info to blogpost).

  5. Ben
    March 29th, 2009 at 22:33 | #5 | Internet Explorer 8.0Windows XP

    Opera implements this featuere as well with -o-border-radius. See
    http://operapl.net/planet.styles/planet3.css for an example.

  6. March 29th, 2009 at 22:42 | #6 | Opera 9.64GNU/Linux

    @Ben
    I tried both -o-border-radius and -opera-border-radius and neither of them worked in the latest Opera 9.64. I also found some posts on the opera website, that the support was dropped until the specification is finished.

  7. April 3rd, 2009 at 16:42 | #7 | Google Chrome 2.0.169.1Windows XP

    In the case of dynamically loaded images you could use JavaScript to wrap the image in a tag, hide the image and set width, height, background and your border-radius goodness on the tag. Cool!

  8. April 9th, 2009 at 11:47 | #8 | Internet Explorer 7.0Windows XP

    Its good but it not working on IE

  9. April 9th, 2009 at 11:55 | #9 | Opera 9.64GNU/Linux

    @hemant
    of course, this is CSS 3 feature and IE8 only has CSS 2.1 support (not sure about older versions)

  10. Cody
    June 15th, 2009 at 22:56 | #10 | Firefox 3.0.10Ubuntu 9.04

    In my testing this workaround does not work in Konqueror(KHTML) It still shows the square background. This is in Konqueror 4.2.4.

  11. June 15th, 2009 at 23:15 | #11 | Opera 9.64GNU/Linux

    @Cody
    Please add your observations to bugreport in KHTML bugzilla mentioned at the end of the blogpost.

  12. Bryce
    July 17th, 2009 at 17:34 | #12 | Firefox 3.5Windows XP

    So, is there still no way to round corners on an image using CSS3 until they fix this bug? For my implementation I can’t use it as the background image of a div.

  13. July 17th, 2009 at 17:41 | #13 | Opera 10.00GNU/Linux x64

    @Bryce
    I’m afraid not. What’s so special about your implementation that you can’t use div+background?

  14. Bryce
    July 17th, 2009 at 20:49 | #14 | Firefox 3.5Windows XP

    I was using a javascript image rotator that used inline images, but I’ve subsequently been able to make it work with div+background.

  15. August 28th, 2009 at 08:29 | #15 | Firefox 3.5.2Windows XP

    I’ve been working on a javascript image rotator and ive gone back and forth between using div + background image and just a regular img. As much as I would like to be able to round the top corners on my little slideshow, I can’t get it to work on images placed with an img tag. If I use a div background I can round the corners but I lose access to the img tag’s “.complete” feature that allows me to check if an image has fully downloaded before I try to manipulate it. Unless theres another way to check to see if a background image has completed download, I’m going to have to say that making the script better able to deal with slow connections is probably more important than round corners. Especially since support for radius is still lacking in some browsers. I’m open to suggestions though.

  16. August 29th, 2009 at 11:27 | #16 | Firefox 3.5.2Windows 7

    Thanks a lot for this info Pavol. I spent hours finding a good method to add rounded Facebook-like corners to a template for the JoomlaComment extension I am creating – I tried the JavaScript/JQuery methods (way too much overhead) and simple PNG-overlay graphics (doesn’t work well with transparent backgrounds), and despite this being a Draft-CSS3 implementation this is definately the best way to go (too bad IE users). Only your blog had the simple example code to make it happen!

    P.S. For the ‘Facebook like’ corners (just a chop-off) a border of 0px transparent works well. Thanks again!

  17. September 24th, 2009 at 23:38 | #17 | Firefox 3.5.3Mac OS X 10.5

    I just checked this with FF 3.5.3 and it still has the img square corners over the rounded corners of the border. I also checked it in Safari 4.0.2 and it has the corners rounded but it chops of the 2px border around the edges. I would expect the border to follow the corners all the way round like the div example does.

  18. September 25th, 2009 at 10:06 | #18 | Opera 10.00GNU/Linux x64

    @hugh
    Use the appropriate issues I mentioned at the bottom in Update #1 and report the problems there. I think these Developers don’t read comments in my blog :-)

  19. Paul
    October 14th, 2009 at 05:30 | #19 | Safari 4.0.3Mac OS X 10.4.11

    My problem is that I want the images to be links. For ads…

  20. February 24th, 2010 at 20:05 | #20 | Firefox 3.5.8Windows XP

    Awesome! Was getting the same problem but this solved it. I’ve applied it to my header on my site.

  21. April 21st, 2010 at 13:24 | #21 | Firefox 3.6.3Windows 7

    Thanks for sharing the solution.

    @Paul, just place an absolutely positioned 100% in width and height link with no text inside the div. That will solve ya problem.

  22. nigeljohnwade
    July 21st, 2010 at 14:29 | #22 | Firefox 3.6.6Windows XP

    Hmm… Where does the alt text go?

  23. July 31st, 2010 at 19:10 | #23 | Google Chrome 5.0.375.125Windows 7

    @Paul
    you can do the same with creating a class for the specific link so your markup will look something like this
    Text link

    and your css something like this

    a.roundedbigbox{
    width:300px; //width of your ad
    height:250px; //height of your ad
    display:block;
    border: 2px solid black;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -khtml-border-radius: 30px;
    -webkit-border-radius: 30px;
    text-indent:-10000em; // to hide your text version of the link
    }

    and you can change the border color for hover, visited etc.. like this

    a.roundedbigbox:hover{
    border: 2px solid red; // just changing the property that you want to change on the link state, everything else is inherited from the initial class styles
    }

    Hope that helps

    - Dre

  24. March 31st, 2011 at 23:23 | #24 | Firefox 3.6.13Windows XP

    As a best practice, you should put border-radius: 30px AFTER the proprietary ones (-moz-border-radius: 30px, etc)…

  25. March 31st, 2011 at 23:25 | #25 | Google Chrome 11.0.698.0openSUSE

    @Dan
    Do you have an explanation why?

  26. April 12th, 2011 at 22:18 | #26 | Firefox 4.0Windows 7 x64 Edition

    @Pavol Rusnak
    Pavol,

    Placing the standard property after the proprietary ones will result in the standardized property being applied in place of the proprietary one as web-browsers update to support the standard properties. I’m not sure if that’s the only reason for this best practice, but it’s at least one good reason to do so.

  27. July 4th, 2011 at 17:45 | #27 | Google Chrome 12.0.742.112Windows 7

    Thanks for sharing however still have problem for setting width and height for the image in background. It seems image is not stretched to the div size.

  28. October 8th, 2011 at 22:19 | #28 | Google Chrome 14.0.835.186Windows 7

    Hmm .. still anyway to do it on a img tag ? I have some images into a slideshow …. :(

  29. felix
    January 20th, 2012 at 14:17 | #29 | Chromium 14.0.835.202Ubuntu 10.10

    Just great!

  1. October 29th, 2009 at 10:19 | #1 | WordPress 2.8.4
  2. February 5th, 2011 at 05:39 | #2 | WordPress 3.0.4
  3. May 11th, 2011 at 11:45 | #3 | WordPress 3.1.1
or