Rounded Corner Buttons using CSS3

Rounded Corner Buttons using CSS3

There are loads of useful features available in CSS3. Curved edge button is one of the valuable features. Using border-radius attribute we can style the buttons with curved edges. Previously images are used for curved edge button but with new CSS3 we can easily create the curvy edges.

Sample:

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 20px;

                     background-color:#42b0f4;

                  }

We can create different shapes based on our requirements. We can define the border-radius for the four edges. If we are defining four values then, the top left edge is denoted with the first value and then clockwise edges for the remaining.

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 0px;

                     background-color:#42b0f4;

                  }

CSS for the button:

input{

                     clear:both;

                     width: 100px;

                     height: 30px;

                     border-radius: 20px 20px 5px 5px;

                     background-color:#42b0f4;

                  }