Geek Answers Handbook

HTML rounded corner and elliptical button

I want to create an HTML button with a rounded corner and an elliptical shape without an image. What is the way to do this?

+4
source share
4 answers

This makes all sides rounded:

border-radius:40px;

This makes them elliptical:

 border-radius:40px/24px;

Look here to see:

http://jsfiddle.net/xnTZq/

Or with some extra ugly affection:

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

+19
source 
 -webkit-border-radius:3em / 1em; -moz-border-radius:3em / 1em; border-radius:3em / 1em;
+3
source 
 #box-1 { -webkit-border-radius:10px; -moz-border-radius:10px; -border-radius:10px; }

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

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

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

+1
source

Perhaps use the radius of css3 and lower the height to get an elliptical shape, a good site to support cross-browser (browsers that support css3, of course, if you do not use css3 pie http://css3pie.com/ ) http: // border- radius.com/

koolies

0
source

More articles:


All Articles