css rounded rectangle

[An156]

please help me to create a rounded rectangle box in css.
i tried the code

.tablestyle
{ border: 1px solid #999;
-moz-border-radius: 5px;
padding: 5px;
color: black;
font-weight: bold;
-webkit-border-radius: 5px;
font-size: 13px;
}

its working under firefox but not working on IE.

PLZ HELP

[hbmehta]

IE doesn't support this properties. IE doesn't support any properties for rounded corner. There are couple of ways to it.

1. Try google search for roundedcorner.htc something like that. some one created some code to make it work on all the browsers.

2. Use table method. e.g [http://www.yourhtmlsource.com/tables/roundedcorners.html] this might help you.

3. Similar to table methods, if you have images you can use span tags instead of tables. <span class="leftcorer" /><span class="centerPart" /><span class="rightcorner" />. Put background images in all 3 classes respectively.

you will get what you want using any of these 3 famous tricks for sure.

Hope this helps.

[hbmehta]

I forgot to tell you. Table method will be useful in case of designing large background container kinda stuff. Like if you are doing it for divs.

span method is useful for doing rounded corner to buttons.

[An156]

is there any method to do it with out using images?

[BeeDeeDubbleU]

There are lots of ways of doing this online both with and without images. Google rounded corners css.

[hbmehta]

As I said earlier someone created .htc file that you can use for rounded corners. (http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser)

Till I know there is no css for rounded corners for IE. CSS has properties as you mentioned in your post but those doesnt work for IE. Check out the link, download .htc file and use it, till I know you dont need to use separate images if you use that.

Hope that helps.