使asp.net按钮控件的角变圆

Question

In my custom webpart I am using few buttons and would like to make their corners rounded.

Below is one of my button in the ascx file:

 <style type="text/css">
   {
   .BtnStyle
   {
    border: thin ridge #FF0000; 
    background-color: #C0C0C0; 
    font-family: verdana; 
    font-size: 8pt; 
    font-weight: bold; 
    color: #FF0000;
    border-top-left-radius: 10px 5px; --- did not work 
    border-bottom-right-radius: 10% 5%; --did not work 
    border-top-right-radius: 10px; -- did not work 
    -moz-border-radius: 15px; --- did not work 
    -webkit-border-radius: 15px; --- did not work 
    border-radius: 15px; --- did not work and gives an error saying not a valid CSS property

}
}

<table width="500px">
<tr>
<td align="right"  >
<table width="60%">
<tr>
    <td  valign="middle" align="right">
        <asp:Button ID="bttn1" runat="server" onclick="bttn1_Click" 
            Text="Delete" CssClass="BtnStyle" />
    </td>

Nothing worked. Please provide me CSS code that helps me making the corners rounded.

Answer 1

The correct property should be:

border-radius:15px;

You can drop the vendor prefixes, as all modern browsers accepts the standard now anyway. I don't know why it doesn't work in your case, but I would check the output to see if the class is there or the style is dropped.

Your editor doesn't recognize CSS3 properties, which is why it's marked as invalid. That doesn't mean it's actually invalid, as modern browsers will parse it just fine.

Also bear in mind that any IE version below 9 doesn't support border-radius. You can use http://css3pie.com/ to make IE7 and IE8 support it, but I think it's better to leave it out and reserve the fancy stuff for the modern browsers, unless the client demands it.

EDIT: You have too many curly brackets. Remove the first and last one. Also, your style tag is not closed.

Answer 2

Which browser are you using? Border-radius is not supported on IE versions before ie9 as this tag is considered an advanced CSS property.