Rounded borders

HTML & CSS
1

Hello all,
I wad wondering; what is the best way to create rounded borders do that they are compatible with multiple browsers, especially Internet explorer?
Thanks,
Paolo

2

Hi Paolo,

There are various methods.

With CSS and images:

http://www.pmob.co.uk/temp/roundcorner-oneimage.htm

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

You could use CSS3 only, but it won’t work is all browsers:


#box {
  -webkit-border-radius:9px; /* for Safari */
  -moz-border-radius:9px;  /* for Firefox */
  -khtml-border-radius: 9px;  /* for Konqueror*/
  border-radius:9px;
}

With JavaScript:
http://www.html.it/articoli/nifty/index.html
http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
http://code.google.com/p/curvycorners/

3

Thanks Ralph, I will try these later on :slight_smile:

4

Just in case you were still interested, there’s a project under-way using an HTC file to give IE6x support for CSS3 stuff like border-radius:

http://www.fetchak.com/ie-css3/ :slight_smile: