Rounded corners in all browsers

[death180]

Hey guys, I am building a website but I am fairly new to rounded corners.

This is what I currently have but it doesn't work in IE, Only FireFox.

-moz-border-radius: 5px;
border-radius: 5px;

I know there is a way to use images to get the rounded corners and forums often use that, but I don't know how to do that.

Much help would be appreciated.

 

[Justin]

What I would do for this case is use images. Make a rounded corner for each corner. That way it definatly will work for ALL browsers that support images :great:

 

[death180]

Okay I see, what would I put in the CSS, that's really where it confuses me.

 

[Dean]

You can get css to work around IE. I will post how to do it(pretty easy) later on. 🙂

 

[Jonathan]

I honestly have no idea about rounded corners in CSS.

You can try doing tables with images, I wouldn't recommend it though. I tried it once - http://zonexbox.com/ap/

 

[Cosmic]

Also use -webkit-border-radius. That will make it work for several other browsers other than FireFox. IE not included.

 

[death180]

2 things i need to know, how do I make the images.. and then what do you put in the css to get it to work. if i were to do it with images.

 

[Jonathan]

With images, it's simple

You make, with an image editing tool, one image for each corner. The way I did it was with tables.

Briefly and basically,

<table>
<tr><td><img src="imgcorner1.png" /></td><td></td><td><img src="imgcorner2.png" /></td></tr>
<tr><td>content here</td></tr>
<tr><td><img src="imgcorner3.png" /></td><td></td><td><img src="imgcorner4.png" /></td></tr>
</table>

 

[Cosmic]

With images, it's simple

You make, with an image editing tool, one image for each corner. The way I did it was with tables.

Briefly and basically,

<table>
<tr><td><img src="imgcorner1.png" /></td><td></td><td><img src="imgcorner2.png" /></td></tr>
<tr><td>content here</td></tr>
<tr><td><img src="imgcorner3.png" /></td><td></td><td><img src="imgcorner4.png" /></td></tr>
</table>

Doing that's a gigantic pain. I would recommend using CSS but designing it so that the design isn't ruined if the visitor is using IE.

 

[NBK*Twitch]

Also use -webkit-border-radius. That will make it work for several other browsers other than FireFox. IE not included.

Also put -khtml-border-radius and -o-border-radius for opera and khtml web browsers.

 

[Jonathan]

Doing that's a gigantic pain. I would recommend using CSS but designing it so that the design isn't ruined if the visitor is using IE.

I agree, it's not a good idea really. Not something I'd look into doing anymore. It's still an option though, if you want compatibility with all browsers or perhaps more interesting corners

 

[Dean]

-moz-border-radius: 8px; 
-webkit-border-radius: 8px;
	behavior: url(border-radius.htc);
        border-radius: 8px;

Download border-radius.htc here

Upload htc file to your main directory.

That covers all browsers I believe.

 

[death180]

that doesn't work in Internet Explorer.

 

[OscarG]

http://www.html.it/articoli/nifty/index.html

 

[Dean]

that doesn't work in Internet Explorer.

You need the htc file and a call to it via css for it to work on IE...

Did you even try it?

 

[death180]

yes i tried it.

 

[OscarG]

See my link. It's compatible with all browsers.

 

[death180]

I did see it, just haven't tried it yet.

 

[Jonathan]

http://csscorners.com/

This is the most convenient way

Browsers: http://www.findmebyip.com/litmus/ (Border Radius)

Sorry to bump this, just found the useful site earlier

 

[death180]

I like that first one but I am using fieldsets which I have pretty much figured out that no matter what I do it still won't be read correctly by IE.