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 🙂
