diff --git a/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss b/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss
index 1c86788d102..c675fbc38f9 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-component.scss
@@ -16,7 +16,7 @@
         @extend %igx-splitter-base !optional;
 
         @include b(#{$this}-bar-host) {
-            &:focus {
+            &:focus-visible {
                 @extend %igx-splitter-bar--focus !optional;
             }
         }
@@ -39,9 +39,35 @@
                 @extend %igx-splitter-expander--end !optional;
             }
 
+             &:active {
+                @extend %igx-splitter-bar--active !optional;
+
+                @include e(handle) {
+                    @extend %igx-splitter-handle--active !optional;
+                }
+
+                @include e(expander, 'start') {
+                    @extend %igx-splitter-expander--start--active !optional;
+                }
+
+                @include e(expander, 'end') {
+                    @extend %igx-splitter-expander--end--active !optional;
+                }
+            }
+
             @include m('vertical') {
                 @extend %igx-splitter-bar--vertical !optional;
 
+                &:active {
+                    @include e(expander, 'start') {
+                        @extend %igx-splitter-expander--start-vertical--active !optional;
+                    }
+
+                    @include e(expander, 'end') {
+                        @extend %igx-splitter-expander--end-vertical--active !optional;
+                    }
+                }
+
                 @include e(handle) {
                     @extend %igx-splitter-handle !optional;
                     @extend %igx-splitter-handle--vertical !optional;
diff --git a/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss
index b45a2f5b4a0..2166fa13ca5 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/splitter/_splitter-theme.scss
@@ -15,8 +15,10 @@
 
     $variant: map.get($theme, '_meta', 'theme');
 
-    //splitter-size + borders
-    $splitter-size: unitless(map.get($theme, 'size')) + 2;
+    $base-font-size: 16;
+
+    //splitter-size (convert rem to px) + padding
+    $splitter-size: unitless(map.get($theme, 'size')) * $base-font-size + 2;
 
     //calculate the value for the slim(indigo) splitter
     $slim-splitter: calc( 1 / $splitter-size);
@@ -62,7 +64,7 @@
     %show-controls {
         %igx-splitter-handle,
         %igx-splitter-expander {
-            opacity: 1;
+            opacity: .68;
             transition: opacity .25s ease;
             pointer-events: auto;
         }
@@ -76,11 +78,13 @@
         [aria-orientation='vertical'] & {
             transform: scaleY(1);
         }
+
         transition-delay: 0s !important;
     }
 
     %indigo-splitter-bar {
         @extend %hide-controls;
+        transition: all .25s .3s $in-out-quad !important;
 
         [aria-orientation='horizontal'] & {
             transform: scaleX($slim-splitter);
@@ -90,17 +94,23 @@
             transform: scaleY($slim-splitter);
         }
 
-        &.igx-splitter-bar--collapsible {
-            transition: all .25s .5s $in-out-quad !important;
+        &:hover {
+                @extend %expand-bars;
+        }
 
+        &.igx-splitter-bar--collapsible {
             &::before,
             &::after {
                 transition-delay: 2s;
             }
 
             &:hover {
-                @extend %show-controls;
-                @extend %expand-bars;
+                %igx-splitter-handle,
+                %igx-splitter-expander {
+                    opacity: 1;
+                    transition: opacity .25s ease;
+                    pointer-events: auto;
+                }
 
                 &::before,
                 &::after {
@@ -126,17 +136,23 @@
         flex-grow: 1;
         justify-content: center;
         align-items: center;
-        background: $splitter-color;
-        border: rem(1px) solid $splitter-color;
+        background: hsla(from $splitter-color h s l / 0.68);
         z-index: 99;
-        opacity: .68;
-        transition: opacity .15s $out-quad !important;
+        padding-block: rem(1px);
 
         @if $variant != 'indigo' {
+            transition: background .15s $out-quad !important;
             @extend %hide-controls;
 
             &.igx-splitter-bar--collapsible {
                 @extend %show-controls;
+
+                &:hover {
+                    %igx-splitter-handle,
+                    %igx-splitter-expander {
+                        opacity: 1;
+                    }
+                }
             }
         }
 
@@ -156,31 +172,41 @@
 
         &:hover {
             transition: all .25s ease-out;
-            opacity: 1;
+            background: $splitter-color;
         }
     }
 
     %igx-splitter-bar--focus {
         // Remove the default browser outline styles
-        outline: transparent solid rem(1px);
-        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
+        outline: none;
+        box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
+        transition: box-shadow .15s ease-in if($variant == 'indigo', .1s, 0s);
+        z-index: 100;
 
         @if $variant == 'indigo' {
-            box-shadow: none;
-
             %indigo-splitter-bar {
-                background: var-get($theme, 'focus-color');
-                border-color: var-get($theme, 'focus-color');
+                @extend %expand-bars;
 
                 &.igx-splitter-bar--collapsible {
-                    @extend %show-controls;
-                    @extend %expand-bars;
+                     @extend %show-controls;
+
+                     &:hover {
+                        %igx-splitter-handle,
+                        %igx-splitter-expander {
+                            opacity: 1;
+                        }
+                    }
                 }
             }
         }
     }
 
+    %igx-splitter-bar--active {
+        background: var-get($theme, 'bar-color-active');
+    }
+
     %igx-splitter-bar--vertical {
+        padding: 0 rem(1px);
         flex-direction: column;
         height: 100%;
 
@@ -202,6 +228,10 @@
         border-radius: var-get($theme, 'border-radius');
     }
 
+    %igx-splitter-handle--active {
+        background: var-get($theme, 'handle-color-active');
+    }
+
     %igx-splitter-handle--horizontal {
         width: 25%;
         height: var-get($theme, 'size');
@@ -231,7 +261,7 @@
     }
 
     %igx-splitter-expander--start {
-        border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -242,9 +272,12 @@
         }
     }
 
+    %igx-splitter-expander--start--active {
+        border-block-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end {
-        border-bottom: unset;
-        border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');
+        border-block-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');
 
         &::before {
             @extend %igx-splitter-hitbox;
@@ -255,10 +288,14 @@
         }
     }
 
+    %igx-splitter-expander--end--active {
+        border-block-start-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--start-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
+        border-block-start: var-get($theme, 'size') solid transparent;
         border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');
-        border-bottom: var-get($theme, 'size') solid transparent;
+        border-block-end: var-get($theme, 'size') solid transparent;
         border-inline-start: unset;
 
         &::before {
@@ -270,10 +307,15 @@
         }
     }
 
+    %igx-splitter-expander--start-vertical--active {
+        border-block-end-color: transparent;
+        border-inline-end-color: var-get($theme, 'expander-color-active');
+    }
+
     %igx-splitter-expander--end-vertical {
-        border-top: var-get($theme, 'size') solid transparent;
+        border-block-start: var-get($theme, 'size') solid transparent;
         border-inline-end: unset;
-        border-bottom: var-get($theme, 'size') solid transparent;
+        border-block-end: var-get($theme, 'size') solid transparent;
         border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');
 
         &::before {
@@ -284,4 +326,9 @@
             width: calc(#{map.get($theme, 'size')} * 3);
         }
     }
+
+    %igx-splitter-expander--end-vertical--active {
+        border-block-start-color: transparent;
+        border-inline-start-color: var-get($theme, 'expander-color-active');
+    }
 }