From b3cf9a4320faf508f3e0142c29aee0330fd4f51a Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:12:08 +0200
Subject: [PATCH] kb(tabstrip): Add KB for dotted outline

---
 ...ip-customize-selected-tab-border-blazor.md |  4 +-
 .../tabstrip-remove-dotted-outline.md         | 69 +++++++++++++++++++
 2 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 knowledge-base/tabstrip-remove-dotted-outline.md

diff --git a/knowledge-base/tabstrip-customize-selected-tab-border-blazor.md b/knowledge-base/tabstrip-customize-selected-tab-border-blazor.md
index 27d6c5b299..a237707c20 100644
--- a/knowledge-base/tabstrip-customize-selected-tab-border-blazor.md
+++ b/knowledge-base/tabstrip-customize-selected-tab-border-blazor.md
@@ -95,6 +95,6 @@ else
 
 ## See Also
 
-* [Telerik TabStrip Overview](https://docs.telerik.com/blazor-ui/components/tabstrip/overview)
+* [Remove Dotted Tab Outline](slug://tabstrip-kb-remove-dotted-outline)
+* [Override the Theme or Apply Custom CSS Styles](slug://themes-override)
 * [Telerik TabStrip Tabs Configuration](https://docs.telerik.com/blazor-ui/components/tabstrip/tabs-configuration)
-* [Override the Theme or Apply Custom CSS Styles](slug://themes-override)
\ No newline at end of file
diff --git a/knowledge-base/tabstrip-remove-dotted-outline.md b/knowledge-base/tabstrip-remove-dotted-outline.md
new file mode 100644
index 0000000000..a495895f2d
--- /dev/null
+++ b/knowledge-base/tabstrip-remove-dotted-outline.md
@@ -0,0 +1,69 @@
+---
+title: Remove Dotted Outline of Focused TabStrip Tab
+description: Learn how to remove the dotted outline that appears on Telerik TabStrip tabs when focused or clicked.
+type: how-to
+page_title: How to Remove Dotted Outline of Focused TabStrip Tab
+slug: tabstrip-kb-remove-dotted-outline
+tags: telerik, blazor, tabstrip, css, styles
+ticketid: 1675627, 1644688, 1558648, 1577788, 1539971, 1533822, 1509800
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>TabStrip for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB article answers the following questions:
+
+* How to remove the dotted line around the TabStrip tab content when focus is set on the tab?
+* How to hide the border for selected tab that appears after click?
+* How to get rid of TabStrip borders outlines on click, active, and focus?
+* How to prevent selection of the TabStrip content `<div>`?
+* How to supress the darker dashed border that appears when you click inside the Tab Strip?
+* How can I control the appearance of the Telerik Blazor TabStrip tabs?
+
+## Solution
+
+The focus outline of TabStrip tabs is an accessibility feature. The example below shows to how to remove it, but this is not recommended. Instead, consider using different custom focus styles.
+
+1. Set the TabStrip `Class` parameter to a custom CSS class.
+1. Use the custom class to apply an `outline-style:none` or `outline:none` style to the `div.k-tabstrip-content` children of the TabStrip element.
+
+>caption Remove TabStrip tab dotted outline
+
+````RAZOR
+<TelerikTabStrip @bind-ActiveTabIndex="@TabStripActiveTabIndex"
+                 Class="no-outline">
+    <TabStripTab Title="Tab 1">
+        Tab 1 Content
+    </TabStripTab>
+    <TabStripTab Title="Tab 2">
+        Tab 2 Content
+    </TabStripTab>
+</TelerikTabStrip>
+
+<style>
+    div.no-outline > .k-tabstrip-content:focus {
+        outline-style: none;
+    }
+</style>
+
+@code {
+    private int TabStripActiveTabIndex { get; set; }
+}
+````
+
+## See Also
+
+* [Customize Selected Tab Shadow](slug://tabstrip-customize-selected-tab-border-blazor)
+* [TabStrip Overview](slug://components/tabstrip/overview)
+* [Override Theme Styles](slug://themes-override)