Round Corner Button in CSS


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
  1. border-radius: 25px;  
It is equivalent to   
  1. border-top-left-radius:25px;  
  2. border-top-right-radius:25px;  
  3. border-bottom-right-radius:25px;  
  4. 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.
  1. .roundCorner  
  2. {  
  3.     border-radius: 25px;  
  4.     background-color#4F81BD;  
  5.     color:#FFFFFF;  
  6.     text-align :center;  
  7.     font-family:arialhelveticasans-serif;  
  8.     padding5px 10px 10px 10px;  
  9.     font-weight:bold;  
  10.     width:100px;  
  11.     height:30px;  
  12. }  
CSS class implements
Here I implement that CSS class on server-side button using cssClass button
  1. <asp:Button ID="btnDownload" runat="server" Text ="Download" CssClass="roundCorner" />