CSS3 Table Border Rounding for Modern Browsers (IE9+, Firefox, Chrome5+)

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.

Advertisements

7 thoughts on “CSS3 Table Border Rounding for Modern Browsers (IE9+, Firefox, Chrome5+)

  1. Rounded corners supported by IE9+ and we will wait for years till IE9 becomes mostly used browser in IE suite. Then some another feature will come ..will be supported by IE10+ browsers and we will wait again… we get older and older and keep on waiting…ha ha…

    1. Haha, so true! When I hear about a new browser feature I want to be able to code for it right away, but it takes so long for the majority of people to adopt the newer browser version, so coding for all of the different versions becomes difficult. It’s amazing how long IE6 lasted, and even today IE6 has around 10% market share and it’s been out for a decade!

  2. I used to work for the world’s largest privately held company. When I left, in early 2011, IE6 was still the standard browser used throughout the company and any other version was ‘illegal’.

    1. It’s true, the company I work at used IE6 for the longest time, and Web Developer friends of mine still have to tailor their code to work with IE6 because of company policies like you mention.

      One of the more frustrating things with IE6 was how it could not render layers properly over select lists. That caused me no end of headaches. I’m glad that the company I work at has modernized to the point of supporting mainly IE9.

  3. Coding for IE 6 makes me want to wear a fedora and a bull whip, ’cause that’s what archaeologists wear in the cinema.

    1. So true, I can’t believe the longevity of IE6!

      Even though I do my work on a new computer that runs IE9, I still have to maintain an old backup machine that runs IE6 so that I can troubleshoot sites that need to support IE6 and all of its quirkiness.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s