Blog Post

CSS Border Radius

I am really just adding this so I have it documented in case I forget it in the future or need to reference it. One thing I like to do when messing around with web development is when I use a table to hold something, instead of a silly div (really on wiki pages and such to create cheap button-like objects), is use a round border. So here are the example on how to use round borders for tables, utilizing border-radius and CSS.

Firefox

/* 5px radius on all 4 corners of the table */
-moz-border-radius: 5px;
/* 5px radius on top left and bottom right corners only */
-moz-border-radius: 5px 0 5px 0;
/* 5px radius on bottom left and top right corners only */
-moz-border-radius: 0 5px 0 5px;
/* 5px radius on the top left corner only */
-moz-border-radius-topleft: 5px;
/* 5px radius on the bottom left corner only */
-moz-border-radius-bottomleft: 5px;
/* 5px radius on the top right corner only */
-moz-border-radius-topright: 5px;
/* 5px radius on the bottom right corner only */
-moz-border-radius-bottomright: 5px;

CSS 3

/* 5px radius on all 4 corners of the table */
border-radius: 5px;
/* 5px radius on top left and bottom right corners only */
border-radius: 5px 0 5px 0;
/* 5px radius on bottom left and top right corners only */
border-radius: 0 5px 0 5px;
/* 5px radius on the top left corner only */
border-top-left-radius: 5px;
/* 5px radius on the bottom left corner only */
border-bottom-left-radius: 5px;
/* 5px radius on the top right corner only */
border-top-right-radius: 5px;
/* 5px radius on the bottom right corner only */
border-bottom-right-radius: 5px;

Webkit

/* Just add -webkit- in front of the CSS 3 styles */
-webkit-border-top-right-radius: 5px;

KHTML (Konqueror)

/* Just add -khtml- in front of the CSS 3 styles */
-khtml-border-radius: 5px;

And with that said, Why is there 4, count them 4, different ways to skin the same exact cat? Come on browser devs, lets come together and accept 1 solution and implement it. I have been noticing Ajax-like functions out there to do rounded corners, and now I see why. With like 10 lines of JavaScript, you get this same functionality. Now do this in your style sheet, and 1 table could have as less as 4 lines if it is a simple table, or as many as 16 lines for a bit more complex layout. Anyways, just wanted to keep this documented instead of Googling for it all of the time when I need it, and pass it on to all of you fine folks who are unfortunate enough to read my blog. Plus, I also wanted to pass on how web developers, when utilizing border-radius, can now make a KHTML friendly site πŸ™‚

This entry was posted in Development and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • jack

    and opera doesn’t support them….argh……

    ….ie too, but that’s normal… they said that it’s not standard yet so they haven’t included them….

  • This is because border-radius isn’t an official standard yet – have a look at this: http://reference.sitepoint.com/css/vendorspecific

  • jack

    yep, i know… but i’ll be…. and we will have to wait months for other browsers to adapt and include it… chrome is also rendering the corners in an ugly way… πŸ™
    opera has also some problems with a kind of css only tooltips which uses z-index, but that would be ot… πŸ˜‰

  • sil

    There aren’t four ways; there’s one way, border-radius. But browser developers are trying hard to not implement specs before they’re final, because there was way too much “embrace and extend” stuff going on. So now, if you decide to invent something, you call it -mybrowsername-whatever so everyone knows it’s an invented thing. Since CSS3 isn’t finalised yet, people aren’t supposed to implement it, but since everyone wants border-radius the browser manufacturers have (nearly) all added it as a browser-specific extension.

  • jack

    sil, actually i prefer to use a simple css rule, for 4 different browsers instead of have to use images… there are a lot of ways for doing it, and images, imho, are the one who takes more times….which i prefer to spend on other stuff πŸ™‚

  • @sil – ah, got it, thanks for that clarification.

  • james

    Opera 9.5+ supports SVG backgrounds which is a way to get rounded corners in that browser. All you have to do is knock up an SVG XML file with the required attributes and it should stretch to the box width and height

    http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/

    the -vendor-specific selectors are the best way to support features that have not yet been finalised in CSS3. Imagine if everyone implemented border-radius but did it a different way ? The best method in IE is to use quadrant images positioned in the corners, it sucks, but then it’s IE.

    HTH

  • rbitanga

    Actually, -khtml-border-radius works on both WebKit and KHTML but -webkit-border-radius only works on WebKit. So I recommend people use -khtml-border-radius for WebKit specific border radius support.

  • @rbitanga groovy find dude, thanks for that!

  • Tim

    Why’d mozilla have to go be difficult and make theirs -radius-bottomleft instead of -bottom-left-radius like everyone else?

  • pie

    I just love rounded corners!

  • Great, I just fixed this in Launchpad, thanks!

  • I compiled a table comparing -webkit- and -moz- with the spec, including some shorthand options you don’t list here. You might find it handy. Worth remembering when you look at the table is that unreleased webkit builds mimic Mozilla almost exactly (except they specify the corners correctly).

    I read a note by an Opera developer that when they implement border raduis they would either use -o-border-radius or straight-up border-radius if they thought the spec was stable enough. It's been a while since that comment, though.

    IE doesn't have SVG graphics, which means they're a long way from having border-raduis.

    Hope this is helpful.

  • David

    border-radius in Presto 2.4

    imgur.com/W6SOK.png

    πŸ™‚

  • Great Quotes

    George CarlinThe other night I ate at a real nice family restaurant. Every table had an argument going….Get more Famous quotes from http://www.greatquotes4u.com

  • Subscribe to nixternal.com

     Subscribe in a reader

    Or, subscribe via email:
    Enter your email address:

  • Archives


semidetached
semidetached
semidetached
semidetached
%d bloggers like this: