How to achieve this type of design in rad tab

[M Kumar]

Hi, 
  We want to design rad tab like this in screenshot - 
http://prntscr.com/szu382 
http://prntscr.com/szu4vl
http://prntscr.com/szu51i

Pls reply asap

Thanks

[Rumen]

Please check out these resources:

https://www.telerik.com/forums/radtabstrip-space-between-tabs-and-round-corners-to-the-tabs

https://www.telerik.com/support/code-library/tabs-with-rounded-corners-using-jquery-css

 

For the lightweight rendering you can experiment with the border-radius: 25px css property and override RadTabStrip classes:

 

Regards,
Rumen
Progress Telerik

[M Kumar]

Hi,

  1. Can i get set of css which appear rounded corners and space between and also no more line on top or bottom, Here i tried but still appear in box style with space and line on top. I need rounded corners, space between and no more lines on top or bottom.
My code is : 
    div.RadTabStrip .rtsLI 
    { 
        margin-right: 10px; 
        border-radius: 25px;
    }
Control :
<telerik:RadTabStrip ID="RadTabStrip6" MultiPageID="MultiPage" runat="server"    Skin="Outlook"
               RenderMode="Lightweight" Orientation="HorizontalBottom"  SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="User Management" Selected="True" Value="1">
                </telerik:RadTab>
                <telerik:RadTab Text="Email Settings" Value="2">
                </telerik:RadTab>
                <telerik:RadTab Text="User Settings" Value="3">
                </telerik:RadTab>
                <telerik:RadTab Text="Cabinet Settings" Value="4">
                </telerik:RadTab>
                
            
            </Tabs>
        </telerik:RadTabStrip>

2. Same like from this link can create style in rad tab with same animation , like bottom line moving
link : https://codepen.io/woranov/pen/NRqLWK?__cf_chl_jschl_tk__=04d2ce09739c1c783882f65e78cc0693c1e734cc-1592541238-0-AegBMGk3NqRCcRO-yjqXwsKKNEqeuiKMH4ZiraxoEzkFClSPNGJDCgbqbCfjpS3ZJL0u38-J11GgsD8nc3musUMGNcz8ce6eap4yQsGZAuNR1hqq3T-QixsOZ-KN2uRlTxUpvWpI3WzKUQy97bmKVUTDHdwtZqawVseuRuN4B39CNzg1QC_Bfj6f9chtfvjatgWbS6ZKmhbVnPz-W9lefh2a8ts29NXXKP5IbQOJHO4ja3C3UCHnEgoVgXB6TJbT1gHKAhmAeRWAusNuMnvDszk8HrAtvY0mzd70GIT5EyeDiuMSUYBhbddAewB4_ye6MIBEF6CO0pLG7Rm5kJNrnZRlZzmMRUC48EtcHwjbd0_O

Thanks

[Doncho]

Hi,

I would suggest inspecting the rendered HTML structure on the page and the built-in styles applied. The first two points of the Improve Your Debugging Skills with Chrome DevTools can help in that process.

Once you define which styles you need to overrule you can apply custom CSS using strong enough selectors to be able to override the built-in appearance.

Here is a sample CSS you can try:

/*Clear the unwanted background and border*/
div.RadTabStrip .rtsLevel {
    border-color: transparent;
}

div.RadTabStrip .rtsLI,
div.RadTabStrip .rtsLI.rtsHovered {
    margin-right: 10px;
    border: none;
}

div.RadTabStrip .rtsLI .rtsLink,
div.RadTabStrip .rtsLI.rtsHovered .rtsLink,
div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
    background: none;
    border: none;
    box-shadow: none;
}

div.RadTabStrip .rtsLevel .rtsLI.rtsSelected .rtsLink:before {
    background: none;
    border: none;
}

/*Shape and color the selected tab*/
div.RadTabStrip .rtsLI.rtsSelected {
    background-color: orange;
    border-radius: 25px;
}

div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
    color: white;
}

Concerning your second question and the desired animation you can try compiling the preprocessor code from the link to CSS and try to adjust it to the current scenario.

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik