diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
index a0847b854ba..ee297f0167b 100644
--- a/core/src/components/split-pane/split-pane.ios.scss
+++ b/core/src/components/split-pane/split-pane.ios.scss
@@ -11,17 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
+  @include border(0, var(--border), 0, 0);
+
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: var(--border);
-  border-left: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  @include border(0, 0, 0, var(--border));
+  
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: 0;
-  border-left: var(--border);
 }
diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss
index 993cfb4dbcb..1336f61d75d 100644
--- a/core/src/components/split-pane/split-pane.md.scss
+++ b/core/src/components/split-pane/split-pane.md.scss
@@ -11,17 +11,15 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side) {
+  @include border(0, var(--border), 0, 0);
+
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: var(--border);
-  border-left: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  @include border(0, 0, 0, var(--border));
+
   min-width: var(--side-min-width);
   max-width: var(--side-max-width);
-
-  border-right: 0;
-  border-left: var(--border);
 }
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index cc8b0751f0f..e3e4afb0dc7 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -324,6 +324,16 @@
   bottom: $bottom;
 }
 
+// Add border for all directions
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
+  @include property(border, $top, $end, $bottom, $start);
+}
+
 // Add border radius for all directions
 // @param {string} $top-start
 // @param {string} $top-end