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.
  • Archives


semidetached
semidetached
semidetached
semidetached
%d bloggers like this: