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
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" />