Rounded corner & elliptical shape button in HTML

I开发者_开发知识库 want to create a HTML button with rounded corner and elliptical shape without image. What is the way to do it?

This makes all sides rounded:

border-radius:40px;

This makes them elliptical:

border-radius:40px/24px;

Have a look here to see:

http://jsfiddle.net/xnTZq/

Or with some extra ugly fanciness:

http://jsfiddle.net/xnTZq/6/

-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;

#box-1 {
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   -border-radius:10px;
}

This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.

This is a very useful article to read if you need more help with this:

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

Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/ ) http://border-radius.com/

koolies