how to change the shape of submit button to circle

vivek_jonam picture vivek_jonam · Jul 26, 2012 · Viewed 59.9k times · Source

Possible Duplicate:
Draw Circle using css alone

I would like to know if there is any way to change the shape of the submit button from rectangle to circular shape??

I dont want to use an circular shapped image solution. I want the all other characteristics of the button as from the css style.

Answer

Nikola K. picture Nikola K. · Jul 26, 2012

Use border-radius property.

Example:

.button {
    width: 100px;
    height: 100px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 50%
}

The above example will give you a regular circle.

If you want just a little rounded shape, try this:

.button {
    width: 100px;
    height: 30px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px
}

Live demo: Regular circle
Live demo: Rounded shape
Live demo: Input button with text