Spacing between tabs

4 posts, 0 answers
  1. Srinivasa Rao Ranga
    Srinivasa Rao  Ranga avatar
    20 posts
    Member since:
    May 2010

    Posted 23 Jun 2010 Link to this post


    I am using RadTabstrip in my application,inside RadTabstrip i am having tabs,my requirement is to have space between the tabs with round corners and i need to change the color of the selected  tab etc...Please find the attached image for reference
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jun 2010 Link to this post

    Hello Srinivasa,

    I hope adding following css on page will help you in setting space between the tabs.

        <style type="text/css"
            div.RadTabStrip .rtsLI 

    Also RadTab objects have a number of properties whose value is the name of a CSS class. These properties let you alter the appearance of individual tabs. Check out the documentation.
    Setting the CSS Class of Tabs

  3. kachy
    kachy avatar
    90 posts
    Member since:
    Aug 2005

    Posted 25 Jan 2011 Link to this post


    I have the same requirement. The tabstrip will have custom design in which first and some other tabs like 5th & 6th tab has rounded corners and there has to be one pixel gap between the tabs, the color of the gap has to be black. Can this design be done using custom css. See the attached image, 1st and 5th tab have rounded corners and 6th tab design is different. Can you please suggest whether I have to use different css for different tabs or just using the custom skin can achieve this design. I am curretly trying to use custom css and I am not able to get the rounded corners. I could get the gap between the tabs but that gap color is white, how can I make that gap color black? I am also attaching the design I have been able to do but with a blue background instead of gray.

    Thanks in advance.
  4. Yana
    Yana avatar
    4604 posts

    Posted 28 Jan 2011 Link to this post


    First you should create a custom skin using some of the embedded skins of tabstrip as a base.  Rounded corners can be achieved by editing the used in your skin background image as explained here.
    Also you should set CssClass property of the tabs in order to apply different styles to them.

    All the best,
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top