Round Corner Button in CSS

In this blog I explain how we can create a round corner button using CSS without an image.

In this blog I explain that how can create a round corner button using css without an image.

I use css border-radius property to create a round corner button. Border-radius is a short hand property for all corner of button. For example I use

border-radius: 25px; 

It is equivalent to   

border-top-left-radius:25px;

border-top-right-radius:25px;

border-bottom-right-radius:25px;

border-bottom-left-radius:25px;

For example border-top-left-radius in below image

CSS code for Round Corner Button

Here I create a css class for round corner button that can be implement on any button/div.

.roundCorner
{
    border-radius: 25px;
    background-color: #4F81BD;
    color:#FFFFFF;
    text-align :center;
    font-family:arial, helvetica, sans-serif;
    padding: 5px 10px 10px 10px;
    font-weight:bold;
    width:100px;
    height:30px;
} 

CSS class implements

Here I implement that css class on server side button using cssClass button

<asp:Button ID="btnDownload" runat="server" Text ="Download" CssClass="roundCorner" />