How to make RadButton with rounded edges

8 posts, 0 answers
  1. Domagoj
    Domagoj avatar
    17 posts
    Member since:
    Jun 2011

    Posted 12 Jul 2011 Link to this post

    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?
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 15 Jul 2011 Link to this post

    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!

  3. DevCraft banner
  4. Domagoj
    Domagoj avatar
    17 posts
    Member since:
    Jun 2011

    Posted 18 Jul 2011 Link to this post

    I have no idea how I missed that one.
  5. Anubha
    Anubha avatar
    2 posts
    Member since:
    Mar 2012

    Posted 01 Mar 2012 Link to this post

    <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

     

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 06 Mar 2012 Link to this post

    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 >>
  7. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2014

    Posted 10 Feb 2015 in reply to Tina Stancheva Link to this post

    That didn't work...didn't change anything.
  8. Chris
    Chris avatar
    3 posts
    Member since:
    Apr 2014

    Posted 10 Feb 2015 in reply to Marin Bratanov Link to this post

    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?
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 12 Feb 2015 Link to this post

    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.

     
Back to Top
DevCraft banner