CODEWITHSUNDEEP
html
Eshika
Eshika

Reputation: 321

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?

Upvotes: 5

Views: 41351

Answers (4)

James Smyth
James Smyth

Reputation: 11

#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/

Upvotes: 1

FIR55TORM
FIR55TORM

Reputation: 41

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

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

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/

Upvotes: 21

ninjagecko
ninjagecko

Reputation: 91092

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

Upvotes: 3

Related Questions