Round Corner Button in CSS

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

Introduction

 

In this blog, I explain 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 corners 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 a round corner button that can be implemented 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" />