This is a migrated thread and some comments may be shown as answers.

How to make RadButton with rounded edges

7 Answers 950 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Domagoj
Top achievements
Rank 1
Domagoj asked on 12 Jul 2011, 05:10 PM
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?

7 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 15 Jul 2011, 09:34 AM
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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Domagoj
Top achievements
Rank 1
answered on 18 Jul 2011, 06:35 AM
I have no idea how I missed that one.
0
Anubha
Top achievements
Rank 1
answered on 01 Mar 2012, 06:42 PM

<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

 

0
Marin Bratanov
Telerik team
answered on 06 Mar 2012, 12:13 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Chris
Top achievements
Rank 1
answered on 10 Feb 2015, 03:18 PM
That didn't work...didn't change anything.
0
Chris
Top achievements
Rank 1
answered on 10 Feb 2015, 04:12 PM
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?
0
Marin Bratanov
Telerik team
answered on 12 Feb 2015, 12:02 PM

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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Buttons
Asked by
Domagoj
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Domagoj
Top achievements
Rank 1
Anubha
Top achievements
Rank 1
Marin Bratanov
Telerik team
Chris
Top achievements
Rank 1
Share this question
or