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:

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?

@Elzo, IE6 is a zombie. Yes, it's dead but you still have to be damn careful around it! — DaveDev
– DaveDev, Commented Sep 17, 2010 at 16:20
@Elzo: IE6 isn't dead. Far from it. Unfortunately. I've seen and answered this comment so many times, I finally decided to just write it down once: blog.niftysnippets.org/2010/10/ie6-undead-browser.html — T.J. Crowder
– T.J. Crowder, Commented Oct 5, 2010 at 16:58

rebelliard · Accepted Answer · 2010-09-17 16:12:19Z

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();

answered Sep 17, 2010 at 16:12

rebelliard

9,6217 gold badges49 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChrisLively Over a year ago

This is by far the easiest way.

bpeterson76 · Accepted Answer · 2010-09-17 16:10:10Z

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.

marcgg · Accepted Answer · 2010-09-17 16:03:52Z

0

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

answered Sep 17, 2010 at 16:03

marcgg

66.9k53 gold badges183 silver badges238 bronze badges

2 Comments

T.J. Crowder Over a year ago

Well...it can be done with a bunch of really small table cells and background colors...but it ain't pretty.

DaveDev Over a year ago

thanks for the input @marcgg, I've updated the question to reflect.

score 0 · Accepted Answer · 2010-09-17 16:21:14Z

0

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

edited Sep 17, 2010 at 16:21

answered Sep 17, 2010 at 16:13

user372551

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related