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
  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
1.png
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:arial, helvetica, sans-serif;
  8. padding: 5px 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" />
2.png