How to create CSS Rounded Corners Button

Most of the time a standard HTML style rectangular button works fine in our website. But sometime we need them to look fine and want to give them a rounded shape like the buttons created in flash tool.

So here it's. It's easier than you think with the help of CSS. Look at some of the stylish buttons below created in simple HTML and CSS applied on them.



Code:
<input type=button style="border-radius: 11px 11px 11px 11px; padding:10px; background-color:DarkOliveGreen; color:white" value="Rounded Button 1">

---

Code:
<input type=button style="border-radius: 100px 0px 30px 0px; padding:10px; background-color:DarkOliveGreen; color:white" value="Rounded Button 2">

---

Code:
<input type=button style="border-radius: 100px 0 100px 0; padding:10px; background-color:DarkOliveGreen; color:white" value="Rounded Button 3">

---

Code:
<input type=button style="border-radius: 0px 100px 0 100px; padding:10px; background-color:DarkOliveGreen; color:white" value="Rounded Button 4">

---

Code:
<input type=button style="border-radius: 120px 120px 120px 120px; padding:2px; background-color:DarkOliveGreen; color:white" value=">>">

---

The CSS attribute used here for this purpose is border-radius