Spacing between tabs

[Srinivasa Rao Ranga]

HI,

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

[Shinu]

Hello Srinivasa,

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

css:

    <style type="text/css">
        div.RadTabStrip .rtsLI
        {
            margin-right: 10px;
        }
    </style>

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


-Shinu.

[kachy]

Hi,

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.

[Yana]

Hello,

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,
Yana
the Telerik team