diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss
index 13c2a604423..99b08dd50cd 100644
--- a/src/components/ActionList/ActionList.scss
+++ b/src/components/ActionList/ActionList.scss
@@ -61,7 +61,7 @@
     background-color: var(--p-surface-hovered);
     text-decoration: none;
 
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
   }
 
   &.active {
@@ -80,7 +80,7 @@
 
   &:focus:not(:active) {
     @include focus-ring($style: 'focused');
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
   }
 
   &.destructive {
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index c01a77d0275..bbd1815f5a5 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -70,7 +70,7 @@
   margin-left: calc(
     var(--pc-badge-vertical-padding) - var(--pc-badge-pip-spacing)
   );
-  border: border-width(thick) solid currentColor;
+  border: var(--p-border-width-2) solid currentColor;
   border-radius: var(--p-border-radius-half);
   flex-shrink: 0;
 }
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index dc643cf24b3..15a78c5df17 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -419,7 +419,7 @@
     position: relative;
     border-color: currentColor;
     // stylelint-disable selector-max-class
-    box-shadow: 0 0 0 border-width('base') currentColor;
+    box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
     @include focus-ring($border-width: 2px);
 
     &::before {
@@ -481,7 +481,7 @@
 
 .ConnectedDisclosure {
   z-index: var(--pc-button-segment);
-  margin-left: -(border-width());
+  margin-left: calc(-1 * var(--p-border-width-1));
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   height: 100%;
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
index 167f3ee0049..6d6c5d40292 100644
--- a/src/components/ButtonGroup/ButtonGroup.scss
+++ b/src/components/ButtonGroup/ButtonGroup.scss
@@ -38,7 +38,7 @@
     margin-left: 0;
 
     &:not(:first-child) {
-      margin-left: -1 * border-width();
+      margin-left: calc(-1 * var(--p-border-width-1));
     }
   }
 
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 619bcb77517..972e57b1792 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -3,7 +3,7 @@
 .Card {
   background-color: var(--p-surface);
   box-shadow: var(--p-shadow-card);
-  outline: border-width(base) solid transparent;
+  outline: var(--p-border-width-1) solid transparent;
 
   + .Card {
     margin-top: var(--p-space-4);
diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss
index 1ea6c702755..3b4bff8e607 100755
--- a/src/components/DropZone/DropZone.scss
+++ b/src/components/DropZone/DropZone.scss
@@ -18,11 +18,13 @@ $dropzone-stacking-order: (
   bottom: 0;
   opacity: 1;
   transform: scale(1);
-  border: border-width() $dropzone-border-style transparent;
+  border: var(--p-border-width-1) $dropzone-border-style transparent;
 }
 
 @mixin set-border-radius {
-  border-radius: calc(var(--p-border-radius-1) + #{border-width()} + 1px);
+  border-radius: calc(
+    var(--p-border-radius-1) + #{var(--p-border-width-1)} + 1px
+  );
 }
 
 .DropZone {
@@ -42,7 +44,7 @@ $dropzone-stacking-order: (
     right: 0;
     bottom: 0;
     left: 0;
-    border: border-width() $dropzone-border-style transparent;
+    border: var(--p-border-width-1) $dropzone-border-style transparent;
     border-radius: var(--p-border-radius-1);
     pointer-events: none;
   }
@@ -59,7 +61,7 @@ $dropzone-stacking-order: (
 }
 
 .hasOutline {
-  padding: border-width();
+  padding: var(--p-border-width-1);
 
   &::after {
     border-color: var(--p-border-neutral-subdued);
@@ -121,7 +123,7 @@ $dropzone-stacking-order: (
 }
 
 .Container {
-  @include focus-ring($border-width: border-width());
+  @include focus-ring($border-width: var(--p-border-width-1));
   flex: 1;
 }
 
@@ -137,7 +139,7 @@ $dropzone-stacking-order: (
   justify-content: center;
   align-items: center;
   padding: $dropzone-padding;
-  border: border-width() $dropzone-border-style var(--p-interactive);
+  border: var(--p-border-width-1) $dropzone-border-style var(--p-interactive);
   text-align: center;
   color: var(--p-interactive);
   background-color: var(--p-surface-selected);
diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss
index 00077c5fb92..7796202f652 100644
--- a/src/components/Frame/components/Toast/Toast.scss
+++ b/src/components/Frame/components/Toast/Toast.scss
@@ -18,7 +18,7 @@ $Backdrop-opacity: 0.88;
   }
 
   @media (forced-colors: active) {
-    @include high-contrast-border(border-width(thick));
+    @include high-contrast-border(var(--p-border-width-2));
   }
 }
 
diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss
index fa9141963de..29302cc9c01 100644
--- a/src/components/OptionList/components/Option/Option.scss
+++ b/src/components/OptionList/components/Option/Option.scss
@@ -53,7 +53,7 @@ $control-vertical-adjustment: 2px;
 
   &:hover:not(.disabled) {
     background: var(--p-surface-hovered);
-    outline: border-width(base) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   // stylelint-disable-next-line selector-max-specificity
@@ -61,7 +61,7 @@ $control-vertical-adjustment: 2px;
   &.select:hover:not(.disabled),
   &:active:not(.disabled) {
     background: var(--p-surface-selected);
-    outline: border-width(base) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   &.disabled {
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index def80721568..6b4adc61ae4 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -71,14 +71,14 @@ $range-thumb-border-error: 2px solid var(--p-border-critical);
 }
 
 .Thumbs {
-  @include focus-ring($size: 'wide', $border-width: border-width());
+  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-1));
   position: absolute;
   z-index: var(--pc-range-slider-input);
   padding: 0;
   width: var(--pc-range-slider-thumb-size);
   height: var(--pc-range-slider-thumb-size);
   border-radius: var(--p-border-radius-half);
-  border: border-width() solid var(--p-interactive);
+  border: var(--p-border-width-1) solid var(--p-interactive);
   background: linear-gradient(var(--p-interactive), var(--p-interactive));
   -webkit-tap-highlight-color: transparent;
 
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 3665db2751d..541f3819315 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -95,7 +95,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: border-width() solid var(--p-border-subdued);
+  border: var(--p-border-width-1) solid var(--p-border-subdued);
   border-bottom-color: var(--p-border-shadow-subdued);
   border-radius: var(--p-border-radius-1);
   background-color: var(--p-surface);
diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss
index 9eb1f33cd62..3a820c2e024 100644
--- a/src/components/Tabs/Tabs.scss
+++ b/src/components/Tabs/Tabs.scss
@@ -3,7 +3,7 @@
 $item-min-height: 16px;
 $item-min-width: 50px;
 $item-vertical-padding: $item-min-height / 2;
-$underline-height: border-width(thicker);
+$underline-height: var(--p-border-width-3);
 $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
 
 .Tabs {
@@ -104,7 +104,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   @include text-emphasis-normal;
 
   &:focus .Title {
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
     // stylelint-disable-next-line  selector-max-specificity
     &::before {
       background: var(--p-action-primary);
@@ -112,7 +112,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   }
 
   .Title {
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
     color: var(--p-text);
 
     &::before {
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index c98aea01086..7e5e1811207 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-$textfield-backdrop-offset: -(border-width(thick));
+$textfield-backdrop-offset: calc(-1 * var(--p-border-width-2));
 $backdrop-horizontal-spacing: calc(var(--p-space-2) * 1.5);
 $addon-horizontal-spacing: 0.25em;
 $spinner-icon-size: 12px;
@@ -165,7 +165,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .Backdrop {
-  @include focus-ring($border-width: border-width());
+  @include focus-ring($border-width: var(--p-border-width-1));
   position: absolute;
   z-index: var(--pc-text-field-backdrop);
   top: 0;
@@ -229,7 +229,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 
 .Spinner {
   --pc-text-field-spinner-offset-large: calc(
-    var(--p-text-field-spinner-offset) + #{border-width()}
+    var(--p-text-field-spinner-offset) + var(--p-border-width-1)
   );
   z-index: var(--pc-text-field-contents);
   margin: var(--pc-text-field-spinner-offset-large);
diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 3f76f1d64c5..720e84a3780 100644
--- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -14,7 +14,7 @@ $content-max-width: 200px;
     var(--p-duration-100);
 
   @media screen and (-ms-high-contrast: active) {
-    border: border-width(thick) solid ms-high-contrast-color('text');
+    border: var(--p-border-width-2) solid ms-high-contrast-color('text');
   }
 }
 
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index a020d37fc8c..3e27ae8c8ec 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -6,7 +6,6 @@
 
 @import './foundation/utilities';
 @import './foundation/colors';
-@import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
 @import './foundation/typography';
diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss
index 50adad36264..cbcbc4004e7 100644
--- a/src/styles/_public-api.scss
+++ b/src/styles/_public-api.scss
@@ -19,7 +19,6 @@
 @import './foundation/utilities';
 @import './foundation/colors';
 @import './foundation/spacing';
-@import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
 @import './foundation/typography';
diff --git a/src/styles/foundation/_accessibility.scss b/src/styles/foundation/_accessibility.scss
index 338df5e2227..f3724818f22 100644
--- a/src/styles/foundation/_accessibility.scss
+++ b/src/styles/foundation/_accessibility.scss
@@ -1,9 +1,9 @@
-@mixin high-contrast-outline($border-width: border-width()) {
+@mixin high-contrast-outline($border-width: var(--p-border-width-1)) {
   outline: $border-width solid transparent;
   @content;
 }
 
-@mixin high-contrast-border($border-width: border-width()) {
+@mixin high-contrast-border($border-width: var(--p-border-width-1)) {
   border: $border-width solid transparent;
   @content;
 }
diff --git a/src/styles/foundation/_border-width.scss b/src/styles/foundation/_border-width.scss
deleted file mode 100644
index 1a4dfec15e1..00000000000
--- a/src/styles/foundation/_border-width.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$border-width-data: (
-  base: 1px,
-  thick: 2px,
-  thicker: 3px,
-);
-
-/// Returns the width of the specified border type.
-/// @param {String} $variant [base] - The border variant key.
-/// @return {Number} The width for the border.
-
-@function border-width($variant: base) {
-  $fetched-value: map-get($border-width-data, $variant);
-
-  @if type-of($fetched-value) == number {
-    @return $fetched-value;
-  } @else {
-    @error 'Border width variant `#{$variant}` not found. Available variants: #{available-names($border-width-data)}';
-  }
-}
diff --git a/src/styles/foundation/_borders.scss b/src/styles/foundation/_borders.scss
index 07d5ec71965..af56f095a52 100644
--- a/src/styles/foundation/_borders.scss
+++ b/src/styles/foundation/_borders.scss
@@ -1,8 +1,8 @@
 $borders-data: (
-  base: border-width() solid var(--p-border-subdued),
-  dark: border-width() solid var(--p-border),
-  transparent: border-width() solid transparent,
-  divider: border-width() solid var(--p-divider),
+  base: var(--p-border-width-1) solid var(--p-border-subdued),
+  dark: var(--p-border-width-1) solid var(--p-border),
+  transparent: var(--p-border-width-1) solid transparent,
+  divider: var(--p-border-width-1) solid var(--p-divider),
 );
 
 /// Returns the default border.
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
index a1133e01b32..5cf172bca0a 100644
--- a/src/styles/shared/_buttons.scss
+++ b/src/styles/shared/_buttons.scss
@@ -10,7 +10,7 @@
   );
 
   @include recolor-icon(var(--p-icon));
-  @include focus-ring($border-width: border-width('base'));
+  @include focus-ring($border-width: var(--p-border-width-1));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -118,25 +118,25 @@
 
 @mixin button-outline($outline-color, $background-color: transparent) {
   background: transparent;
-  border: border-width() solid var(--p-border);
+  border: var(--p-border-width-1) solid var(--p-border);
   box-shadow: none;
   color: var(--p-text);
-  @include focus-ring($border-width: border-width('base'));
+  @include focus-ring($border-width: var(--p-border-width-1));
 
   &:hover {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     background: var(--p-surface-hovered);
   }
 
   &:focus {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     @include focus-ring($style: 'focused');
   }
 
   &:active {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     background: var(--p-surface-pressed);
 
@@ -147,13 +147,13 @@
 
   &.pressed {
     background: var(--p-action-secondary-pressed);
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     color: var(--pc-button-text);
   }
 
   &.disabled {
-    border: border-width('base') solid var(--p-border-disabled);
+    border: var(--p-border-width-1) solid var(--p-border-disabled);
     box-shadow: none;
     background: transparent;
     color: var(--p-text-disabled);
@@ -161,35 +161,35 @@
 
   &.destructive {
     background: transparent;
-    border: border-width('base') solid var(--p-border-critical);
+    border: var(--p-border-width-1) solid var(--p-border-critical);
     box-shadow: none;
     color: var(--p-interactive-critical);
     @include recolor-icon(var(--p-icon-critical));
 
     &:hover {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       background: var(--p-surface-critical-subdued);
     }
 
     &:focus {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       @include focus-ring($style: 'focused');
     }
 
     &:active {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       background: var(--p-surface-critical-subdued);
     }
 
     &.disabled {
-      border: border-width('base') solid var(--p-border-critical-disabled);
+      border: var(--p-border-width-1) solid var(--p-border-critical-disabled);
       background: transparent;
       color: var(--p-interactive-critical-disabled);
     }
 
     &.pressed {
       background: var(--p-surface-critical-subdued);
-      box-shadow: border-width('base') solid var(--p-border-critical);
+      box-shadow: var(--p-border-width-1) solid var(--p-border-critical);
       color: var(--p-interactive-critical);
     }
   }
diff --git a/src/styles/shared/_interaction-state.scss b/src/styles/shared/_interaction-state.scss
index 37bc2b4cdf2..049de01c0da 100644
--- a/src/styles/shared/_interaction-state.scss
+++ b/src/styles/shared/_interaction-state.scss
@@ -33,7 +33,7 @@
   left: calc(-1 * var(--p-space-2));
   height: 100%;
   display: block;
-  width: border-width(thicker);
+  width: var(--p-border-width-3);
   border-top-right-radius: var(--p-border-radius-1);
   border-bottom-right-radius: var(--p-border-radius-1);
 }
diff --git a/src/tokens/token-groups/shape.json b/src/tokens/token-groups/shape.json
index a219b0127ec..2bcd0194e71 100644
--- a/src/tokens/token-groups/shape.json
+++ b/src/tokens/token-groups/shape.json
@@ -8,5 +8,8 @@
   "border-radius-6": "30px",
   "border-radius-base": "3px",
   "border-radius-large": "6px",
-  "border-radius-half": "50%"
+  "border-radius-half": "50%",
+  "border-width-1": "1px",
+  "border-width-2": "2px",
+  "border-width-3": "3px"
 }