Chrome’s border radius CSS feature

Posted on by

Just a note on how Chrome handles it’s rounded corners.

I found out about CSS3′s rounded corner support for Mozilla and Webkit browsers and happily started using it. Turns out though that Chrome currently doesn’t have the shorthand tag for it like Mozilla does – I’m sure it’s something they’re working on though (or maybe even just forgot).

What I mean is that whilst you can do this:

-moz-border-radius: 2px 2px 15px 15px;

For the radius to be applied clockwise starting from top-left, you can’t do that for Webkit at the moment. So you have to write it out long hand like:

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

It’s a tad annoying, but at least Chrome support it, unlike some browsers.

Update: Lots of people seem to be getting to this post via Google, but not staying for long. Comment with what you’re looking for, and I’ll update this post this better information (helping you, and other people that come along later). If you really want to say thanks, you could Flattr this!

18 thoughts on “Chrome’s border radius CSS feature”

  1. I just looked for this, since I didnt know that I have to repeat the border radius statment 4 times in webkit.
    thanks a lot.
    BR
    Rusco

  2. I arrived here looking for the border-radius of what the Chrome engine uses. I thought it used the khmtl value. I guess not. It uses webkit.

  4. Use -webkit prefix for a fair few things, but fI have just realised my corners aren’t working (box-shadow is working), thought the prefix might have been changed/omitted. Might just need to update my version.

  5. Perhaps webkit has been updated – I’m having no problems using -webkit-border-radius: .5em, at least in Safari 4

  6. @rolfsf
    -webkit-border-radius: .5em should work fine, but -webkit-border-radius: .5em 0 2px 10px; doesn’t work as it should, like in Firefox (at least not last time I checked).

  7. I’m working on a design and I’ve found that as soon as I specify something like this:

    -moz-border-radius-topleft: 8px;
    -webkit-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-radius-topright: 8px;

    Chrome ignores the border radius command. If I just say:

    -moz-border-radius: 8px; -webkit-border-radius: 8px;

    It gives me rounded corners. It’s just too bad I don’t want them on all sides…

    Any suggestions?

    This happens in the most current build of Chrome on Windows XP, 7 and Mac OS-X

  8. miri, that’s because Webkit does the word ordering differently. Try this:

    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;

  10. I came here looking for ways to fix Chrome’s shoddy rendering of corner radii when the border is only displayed on select sides. Using the corner values helped in most cases, so this was useful, thanks!

  11. miri, that's because Webkit does the word ordering differently. Try this:

    -webkit-border-top-left-radius: ix;
    -webkit-border-top-right-radius: 8px;

  12. ah, so that’s why the -webkit-border-radius properties didn’t work in my userstyle…

    thanks for the info. :)

  14. That was really helpful, thanks a lot Shane.
    But what about IE8 ?
    How are we gonna fix that troublemaker’s problem, any ideas?
    thanks again..

  16. Thank you so much! I never knew I’d find a way through the moz border.
    Everyone was using mozilla back then until Chrome came out so I really didn’t bother. It works for me. Thanks!

  17. This is exactly what I was looking for… wondering why the “-webkit-border-radius: 5px 5px 0 0″ wasn’t working

  18. if you want to use the 4 values like that, you need to add px after everything, including the 0′s. so you have;

    -webkit-border-radius: 5px 5px 0px 0px;

    At the time of writing this Firefox no longer needs -moz- for border-radius, chrome and safari no longer need -webkit-.

    something else of interest i found out,

    if you want to add radial corners to images, and a border following, only firefox seems to work properly. the other browers ignore the radial on the image and only apply ito to the border. e.g;

    #image img{
    border-radius: 20px 20px 20px 20px;
    border: 3px solid white;
    }

    only works in firefox. However:

    #image img{
    border-radius: 20px 20px 20px 20px;
    }

    #image img{
    border: 3px solid white;
    }

    repeating the div in css with the border styles split between them seems to fix the issue. hopefully this will be patched in webkit browsers soon