How to make RadButton with rounded edges

[Domagoj]

I extensively use RadButton (Silverlight), with an integrated office black theme. I'd like to change the buttons to have rounded edges, but I guess that involves editing the default template. I like the template (office black) and I don't want to change it. However, I'd like to add rounded edges, if that's possible in any simple way.

Any suggestions?

[Tina Stancheva]

Hi Domagoj,

You can round the edges of the button by setting the RadButton.CornerRadius property:

<telerik:RadButton Content="RadButton" CornerRadius="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Give this a try and let me know if it works for you.

Regards,
Tina Stancheva
the Telerik team

[Domagoj]

I have no idea how I missed that one.

[Anubha]

<telerik:RadButton ID="RadButton1" Width="37px" Margin="5,5" runat="server" Skin=""

 

Height="22px" 

Text="12"

 CornerRadius="25" BorderColor="White"  

BorderStyle="Solid" ForeColor="White" BackColor="#CC3300"

 

 style="margin-left: 29px" AutoPostBack="False" BorderWidth="2px"   

 

Font-Bold="True" />

I tried this code but my button is not coming in raound shape. it is still coming in rectangle shape.  please help

 

[Marin Bratanov]

Hello Anubha,

Please accept my apologies for the omission. It seems like you are using the RadButton for ASP.NET AJAX. This is why we ask that you choose the correct forum - in the different suites we often have controls with similar or even exactly the same names, because they have common functionality. When a question is posted in a forum it is taken in the context of the respective technology and just a small snippet may not always be sufficient to note the difference.

Now, to your question - most of the built-in skins of the RadButton for ASP.NET AJAX have rounded corners, which you can examine in their online demos, e.g. here: http://demos.telerik.com/aspnet-ajax/button/examples/default/defaultcs.aspx. You can change the skin via the Skin Chooser on the top right corner.

What happens in your case is that your RadButton is not properly configured
1) you have basically disabled the built-in skins by setting an empty string to the Skin property. Please use one of the 19 built-in skins. In case you wish to create a custom skin please start with examining this article that treats this endeavor.

2) you have set many properties that usually should not be used - BorderColor, BorderStyle, Margin, etc. The RadButton's skin is controlled via its own CSS rules and image sprites, so setting these properties may not have the desired effect, as they are not implemented, they are simply inherited from the common Control class.

3) HTML elements are, by definition, boxes, they do not have rounded corners. Rounded corners were introduced with CSS3 and can only be displayed by browsers that support CSS3. You can see this online demo on using pure CSS techniques to create a RadButton with rounded corners: http://demos.telerik.com/aspnet-ajax/button/examples/css3buttons/defaultcs.aspx.

What  I would advise is to leave only the Text, Skin (but set properly), AutoPostback, Width, ID and runat properties and see how it fits your needs.


All the best,
Marin
the Telerik team

[Chris]

That didn't work...didn't change anything.

[Chris]

using   the following in .css file
     .TelerikButton {
          font-weight:bold;
          background-image:none;
          border-radius: 5px;
          position:relative;
          top:7px;
        }

doe not change RadButton in any way.  using the same attributes in a Style= clause, only the background-image:none, position and top work...what am I doing wrong?

[Marin Bratanov]

Hello Chris,

You must make sure no heavier selectors from the built-in rules override your own rules. Also, you should inspect the rendered HTML to see whether your rules apply to the desired element.

Here is a sample that shows how you can override the built-in styles for a Skinned button:

<telerik:RadButton runat="server" ID="RadButton1" ButtonType="SkinnedButton" CssClass="TelerikButton" Text="some button"></telerik:RadButton>

span.RadButton.rbRounded.rbLinkButton.TelerikButton {
    font-weight:bold;
    background-image:none;
    border-radius: 5px;
    position:relative;
    top:7px;
}

On a side note - if you require such a simplistic appearance you may want to consider just adding a few rules to a generic asp:Button control as it has no CSS rules already associated with it.

Regards,

Marin Bratanov
Telerik