Rounded Corners

Question

Duplicate:
What is the best way to create rounded corners
How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?

What techniques (That are standards compliant) are there for putting rounded corners on display elements in an HTML page?

I put HTML CSS and javascript on the tag list below because I believe they are fairly ubiquitous, but if you have a technique that uses other techniques that may be used and are (relatively) reliable across standard browsers that works as well, but please put a note on what browsers fail.

Answer 1

At a company I have previously worked at, there were extensive quantities of graphics resources that were just rounded edges to enable this. Clunky to manage, but it worked well and looked really nice.

Answer 2

The old-school way it to use a 3x3 HTML table with images: fixed sized images for the corners, stretchable images along the edges, and your content in the middle. See this page for a better description.

Edit: And here's a page describing how to do with with CSS without images.

Answer 3

CSS3 has a border-radius tag and box-shadow tag, but they are only implemented in Mozilla and Safari I think. You can round corners and create shadow very easily using that.

http://www.css3.info/preview/rounded-border/

Other then that, what I do is create images and load those using CSS and DIV tags. This link is what I used to get started.

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

Good luck!