New to Telerik UI for Blazor? Start a free 30-day trial

Customizing the Border of the Selected Tab in TabStrip

Updated on Feb 11, 2025

When using the TabStrip for Blazor, the default appearance includes a grey outline around the selected tab. How can I modify this outline to encompass both the tab title and the content of the selected tab, rather than just the tab title.

This KB article answers the following questions:

How can I change the border around the selected tab in a TabStrip?
Is it possible to include the tab content in the border of the selected tab in TabStrip?
How do I customize the focus border of a TabStrip tab to include content?
How do I remove the TabStrip focus border?

Solution

To customize the border of the selected tab in the TabStrip or remove it, use the box-shadow CSS property. This approach allows you to specify the borders around the tab and its content area.

@if (HideFocusBorder)
{
    <style>
        .tabstrip-shadow .k-tabstrip-item.k-item:focus {
            box-shadow: none;
        }
    </style>
}
else
{
    <style>
        .tabstrip-shadow .k-tabstrip-item.k-item.k-active,
        .tabstrip-shadow .k-tabstrip-item.k-item:focus {
            box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.12), /* Top border */
            -2px 0 0 0 rgba(0, 0, 0, 0.12), /* Left border */
            2px 0 0 0 rgba(0, 0, 0, 0.12); /* Right border */
        }

        .tabstrip-shadow .k-content.k-active {
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
        }
    </style>
}

<TelerikButton OnClick="@(() => HideFocusBorder = !HideFocusBorder)">Hide/Show Focus Border</TelerikButton>
<br />
<br />
<TelerikTabStrip Class="tabstrip-shadow">
    <TabStripTab Title="First">
        <HeaderTemplate>
            <strong>User Details</strong>
        </HeaderTemplate>
        <Content>
            Details content.
        </Content>
    </TabStripTab>
    <TabStripTab Title="Second">
        <HeaderTemplate>
            <strong>User Roles</strong>
        </HeaderTemplate>
        <Content>
            Roles content.
        </Content>
    </TabStripTab>
    <TabStripTab Title="Third">
        <HeaderTemplate>
            <strong>User Attributes</strong>
        </HeaderTemplate>
        <Content>
            Attributes content.
        </Content>
    </TabStripTab>
</TelerikTabStrip>

@code {
    private bool HideFocusBorder { get; set; }
}

Customizing the Border of the Selected Tab in TabStrip

Environment

Description

Solution

See Also