New to Kendo UI for jQuery? Start a free 30-day trial

Removing Heavy Border Around Selected Tab in Kendo UI TabStrip

Environment

Product	Kendo UI TabStrip
Version	2024.1.319 or newer

When using the Kendo UI TabStrip component, a heavy gray border appears around the selected or focused tab. This style is applied by default to enhance accessibility but may not suit certain design preferences or themes, such as bootstrap-3 or classic themes. To remove this border, custom CSS can be applied.

This knowledge base article also answers the following questions:

How to change the appearance of a selected tab in Kendo UI TabStrip?
How to remove focus styling in Kendo UI TabStrip?
How to update tab design in Kendo UI TabStrip?

Solution

To remove the heavy border around the selected tab in Kendo UI TabStrip, apply the following CSS rule:

css

.k-tabstrip-items-wrapper .k-item:focus,
.k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none;
}

Steps:

Add the above CSS code to your stylesheet.
Ensure the stylesheet is properly linked to your application, so the rule takes effect.

Example:

        <div id="tabstrip">
          <ul>
            <li class="k-active">Paris</li>
            <li>New York</li>
            <li>London</li>
            <li>Moscow</li>
          </ul>
          <div>
            <div class="weather">
              <h2>17<span>&ordm;C</span></h2>
              <p>Rainy weather in Paris.</p>
            </div>
          </div>
          <div>
            <div class="weather">
              <h2>29<span>&ordm;C</span></h2>
              <p>Sunny weather in New York.</p>
            </div>
          </div>
          <div>
            <div class="weather">
              <h2>21<span>&ordm;C</span></h2>
              <p>Sunny weather in London.</p>
            </div>
          </div>
          <div>
            <div class="weather">
              <h2>16<span>&ordm;C</span></h2>
              <p>Cloudy weather in Moscow.</p>
            </div>
          </div>
        </div>
      <style>
        .k-tabstrip-items-wrapper .k-item:focus,
        .k-tabstrip-items-wrapper .k-item.k-focus {
          box-shadow: none;
        }
      </style>

      <script>
        $(document).ready(function () {
          $("#tabstrip").kendoTabStrip({
            animation: {
              open: {
                effects: "fadeIn",
              }
            }
          });
        });
      </script>

Note:

This solution applies to all themes, including bootstrap-3 and classic themes.