Simplest way to implement slightly-rounded corners like on this example site?

Question

I have to implement a tab control identical in terms of style to what can be seen here:

http://funds.ft.com

This is the example I've come up with so far:

http://jsfiddle.net/MZUQK/

The biggest issue I'm facing is that the first one has 'rounded' corners that was implemented automatically by the ASP.NET AJAX used to develop the site.

As I'm not using ASP.NET AJAX is there an easy way for me to achieve the same effect that will work on IE6 as well as real browsers? Is the best way to do this via jQuery or CSS?

edit: if it's not possible to get rounded corners in IE6 without images, what's the best way to do it in the rest of the browsers?

Answer 1

To get rounded corners working in IE 6, you'll have to use images

Answer 2

By far the easiest way I've found is using Jquery UI for rounded corners.

It's as easy as including two files and adding this to your class declarations:

<element class="ui-corner-all myclass"> (round all corners of element)

or

<element class="ui-corner-tl ui-corner-tr myclass"> (round top left, top right)

IE is not rounded corner friendly by default, so to exactly duplicate the user experience you'd have to throw in a Jquery or other substitution script. My big corporate clients have unanimously agreed that's not worth the effort--since it gracefully degrades to square corners, IE users will have to deal with it--they chose to use the inferior browser in the first place.

A close second place is the Border radius option (http://www.css3.info/preview/rounded-border/) but it's more syntax to worry about. Using Jquery UI also opens up great features such as Autocomplete, Tabs, Buttons (improvement on standard HTML buttons) etc.

Answer 3

I like the jQuery Corner plugin. It'll work on IE7 and IE8 with IE7 compatibility mode. Of course, IE6 ignores it. It's really lightweight and beats loading jQuery-UI just for corners.

$('#yourDiv').corner();

Answer 4

Here's a good example, creating rounded corners using JavaScript :

Nifty Corners : http://www.html.it/articoli/niftycube/nifty1.html

Using Canvas Element (even in IE) : http://www.netzgesta.de/corner