Background:
Lately I have been playing around with HTML5 and CSS3 while building a Web Site UI for a corporate Intranet. I am guaranteed that users will be using IE, so I am happily able to tailor my code directly for IE 9.
The caveat to using CSS3 rounded borders in IE is that they are only supported in IE 9+. IE 8 and earlier browsers will not accept the style and the borders will appear square without workarounds.
How to Round your Table Borders (in IE):
It’s great how one can now round borders on tables with a simple CSS property.
For example to add a slight rounding effect to the top left and right borders of your table you can use the following style:
table.HeaderTable{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
The CSS3 border rounding properties are as follows:
border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
These properties can take either one or two length values (I like to use px, but em works too).
Use one length value as the radius if you want a circular rounding effect.
Alternately use two length values to create an oval rounding effect. When setting an oval effect the first value specifies the horizontal radius and the second value specifies the vertical radius.
Summary:
CSS3 table border rounding is absolutely great and I wish I had it years ago! I will continue to investigate CSS3 and hope to find more great features to write about in future.
See my follow-up article for more information on table border rounding support in older versions of the major browsers.
Justin Cooney 
Leave a reply to Justin Cooney Cancel reply