From a228a2e53a44eea9747e20b61cddfc04f0bcbb51 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Fri, 7 Nov 2025 10:06:48 -0800
Subject: [PATCH] v6: More logical properties (#41857)

* Logical properties for borders

* More logical properties for text, position, and more

* More logical for the docs
---
 scss/_accordion.scss                   | 11 ++++----
 scss/_breadcrumb.scss                  |  2 +-
 scss/_card.scss                        | 36 ++++++++++----------------
 scss/_carousel.scss                    | 16 +++++-------
 scss/_dropdown.scss                    |  4 +--
 scss/_list-group.scss                  | 12 ++++-----
 scss/_modal.scss                       |  7 +++--
 scss/_nav.scss                         |  8 +++---
 scss/_offcanvas.scss                   |  8 +++---
 scss/_popover.scss                     | 20 +++++++-------
 scss/_spinners.scss                    |  2 +-
 scss/_toasts.scss                      |  2 +-
 scss/_tooltip.scss                     |  8 +++---
 scss/content/_prose.scss               |  4 +--
 scss/content/_reboot.scss              | 10 +++----
 scss/content/_tables.scss              |  8 +++---
 scss/mixins/_border-radius.scss        | 24 ++++++++---------
 scss/mixins/_caret.scss                | 30 ++++++++++-----------
 site/src/scss/_ads.scss                | 10 +++----
 site/src/scss/_brand.scss              |  6 ++---
 site/src/scss/_callouts.scss           |  2 +-
 site/src/scss/_clipboard-js.scss       |  4 +--
 site/src/scss/_component-examples.scss | 15 +++++------
 site/src/scss/_content.scss            | 10 +++----
 site/src/scss/_masthead.scss           |  2 +-
 site/src/scss/_navbar.scss             |  9 +++----
 site/src/scss/_scrolling.scss          |  4 +--
 site/src/scss/_search.scss             | 15 +++++------
 site/src/scss/_sidebar.scss            | 10 +++----
 site/src/scss/_toc.scss                |  8 +++---
 30 files changed, 144 insertions(+), 163 deletions(-)

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index af2409c9b4..6f2e1cb1f1 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -70,7 +70,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
     @include font-size($font-size-base);
     color: var(--#{$prefix}accordion-btn-color);
-    text-align: left; // Reset button style
+    text-align: start; // Reset button style
     background-color: var(--#{$prefix}accordion-btn-bg);
     border: 0;
     @include border-radius(0);
@@ -129,7 +129,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     }
 
     &:not(:first-of-type) {
-      border-top: 0;
+      border-block-start: 0;
     }
 
     // Only set a border-radius on the last item if the accordion is collapsed
@@ -159,12 +159,11 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
 
   .accordion-flush {
     > .accordion-item {
-      border-right: 0;
-      border-left: 0;
+      border-inline: 0;
       @include border-radius(0);
 
-      &:first-child { border-top: 0; }
-      &:last-child { border-bottom: 0; }
+      &:first-child { border-block-start: 0; }
+      &:last-child { border-block-end: 0; }
 
       // stylelint-disable selector-max-class
       > .accordion-collapse,
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 29dcacf9e4..f7d1929fba 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -49,7 +49,7 @@ $breadcrumb-border-radius:          null !default;
       padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
       &::before {
-        float: left; // Suppress inline spacings and underlining of the separator
+        float: inline-start; // Suppress inline spacings and underlining of the separator
         padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
         color: var(--#{$prefix}breadcrumb-divider-color);
         content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
diff --git a/scss/_card.scss b/scss/_card.scss
index 79b4acfb43..67fbed4e85 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -68,16 +68,15 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     }
 
     > .list-group {
-      border-top: inherit;
-      border-bottom: inherit;
+      border-block: inherit;
 
       &:first-child {
-        border-top-width: 0;
+        border-block-start-width: 0;
         @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
       }
 
       &:last-child  {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
         @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
       }
     }
@@ -86,7 +85,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     // use a child selector here to prevent double borders.
     > .card-header + .list-group,
     > .list-group + .card-footer {
-      border-top: 0;
+      border-block-start: 0;
     }
   }
 
@@ -132,7 +131,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     margin-bottom: 0; // Removes the default margin-bottom of <hN>
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-end: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:first-child {
       @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
@@ -143,7 +142,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-start: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:last-child {
       @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
@@ -158,11 +157,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
   .card-header-tabs {
     margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
     margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
-    border-bottom: 0;
+    border-block-end: 0;
 
     .nav-link.active {
       background-color: var(--#{$prefix}card-bg);
-      border-bottom-color: var(--#{$prefix}card-bg);
+      border-block-end-color: var(--#{$prefix}card-bg);
     }
   }
 
@@ -173,10 +172,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
   // Card image
   .card-img-overlay {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     padding: var(--#{$prefix}card-img-overlay-padding);
     @include border-radius(var(--#{$prefix}card-inner-border-radius));
   }
@@ -220,7 +216,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
         + .card {
           margin-inline-start: 0;
-          border-left: 0;
+          border-inline-start: 0;
         }
 
         // Handle rounded corners
@@ -230,13 +226,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-right-radius: 0;
+              border-start-end-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-right-radius: 0;
+              border-end-end-radius: 0;
             }
           }
 
@@ -245,13 +239,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-left-radius: 0;
+              border-start-start-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-left-radius: 0;
+              border-end-start-radius: 0;
             }
           }
         }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 4619d957b6..ebdbe820ab 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -75,7 +75,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-item {
     position: relative;
     display: none;
-    float: left;
+    float: inline-start;
     width: 100%;
     margin-inline-end: -100%;
     backface-visibility: hidden;
@@ -133,8 +133,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-control-prev,
   .carousel-control-next {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block: 0;
     z-index: 1;
     // Use flex for alignment (1-3)
     display: flex; // 1. allow flex styles
@@ -160,11 +159,11 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
     }
   }
   .carousel-control-prev {
-    left: 0;
+    inset-inline-start: 0;
     background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
   }
   .carousel-control-next {
-    right: 0;
+    inset-inline-end: 0;
     background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
   }
 
@@ -193,9 +192,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
 
   .carousel-indicators {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: auto 0 0;
     z-index: 2;
     display: flex;
     justify-content: center;
@@ -217,8 +214,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
       background-clip: padding-box;
       border: 0;
       // Use transparent borders to increase the hit area by 10px on top and bottom.
-      border-top: $carousel-indicator-hit-area-height solid transparent;
-      border-bottom: $carousel-indicator-hit-area-height solid transparent;
+      border-block: $carousel-indicator-hit-area-height solid transparent;
       opacity: $carousel-indicator-opacity;
       @include transition($carousel-indicator-transition);
     }
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index ea18141c6b..3c182140b8 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -115,7 +115,7 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     margin: 0; // Override default margin of ul
     @include font-size(var(--#{$prefix}dropdown-font-size));
     color: var(--#{$prefix}dropdown-color);
-    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
     list-style: none;
     background-color: var(--#{$prefix}dropdown-bg);
     background-clip: padding-box;
@@ -226,7 +226,7 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     height: 0;
     margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
     overflow: hidden;
-    border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+    border-block-start: 1px solid var(--#{$prefix}dropdown-divider-bg);
     opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
   }
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d19774af2b..29b24d8d92 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -112,11 +112,11 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 
     // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
     & + .list-group-item {
-      border-top-width: 0;
+      border-block-start-width: 0;
 
       &.active {
         margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
-        border-top-width: var(--#{$prefix}list-group-border-width);
+        border-block-start-width: var(--#{$prefix}list-group-border-width);
       }
     }
   }
@@ -175,12 +175,12 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
           }
 
           + .list-group-item {
-            border-top-width: var(--#{$prefix}list-group-border-width);
-            border-left-width: 0;
+            border-block-start-width: var(--#{$prefix}list-group-border-width);
+            border-inline-start-width: 0;
 
             &.active {
               margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
-              border-left-width: var(--#{$prefix}list-group-border-width);
+              border-inline-start-width: var(--#{$prefix}list-group-border-width);
             }
           }
         }
@@ -201,7 +201,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
       &:last-child {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
       }
     }
   }
diff --git a/scss/_modal.scss b/scss/_modal.scss
index bd502390e8..b6cee700d9 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -42,8 +42,7 @@
     // scss-docs-end modal-css-vars
 
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: var(--#{$prefix}modal-zindex);
     display: none;
     width: 100%;
@@ -136,7 +135,7 @@
     flex-shrink: 0;
     align-items: center;
     padding: var(--#{$prefix}modal-header-padding);
-    border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+    border-block-end: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
     @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 
     .btn-close {
@@ -174,7 +173,7 @@
     justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
     padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
     background-color: var(--#{$prefix}modal-footer-bg);
-    border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+    border-block-start: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
     @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 
     // Place margin between footer elements
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 8ddbebe61e..aa7fab7499 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -102,7 +102,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
     // scss-docs-end nav-tabs-css-vars
 
-    border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
     .nav-link {
       margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
@@ -171,11 +171,11 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 
     .nav-link {
       padding-inline: 0;
-      border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+      border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
       &:hover,
       &:focus {
-        border-bottom-color: currentcolor;
+        border-block-end-color: currentcolor;
       }
     }
 
@@ -183,7 +183,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     .show > .nav-link {
       font-weight: $font-weight-bold;
       color: var(--#{$prefix}nav-underline-link-active-color);
-      border-bottom-color: currentcolor;
+      border-block-end-color: currentcolor;
     }
   }
 
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index e1bc9c3273..5493a69b06 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -57,7 +57,7 @@
           top: 0;
           left: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(-100%);
         }
 
@@ -65,7 +65,7 @@
           top: 0;
           right: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(100%);
         }
 
@@ -75,7 +75,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(-100%);
         }
 
@@ -84,7 +84,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(100%);
         }
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 12e4480522..a0dbcb9036 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -97,12 +97,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
+        border-block-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
+        border-block-start-color: var(--#{$prefix}popover-bg);
       }
     }
   }
@@ -121,12 +121,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
+        border-inline-end-color: var(--#{$prefix}popover-bg);
       }
     }
   }
@@ -144,12 +144,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
+        border-block-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
+        border-block-end-color: var(--#{$prefix}popover-bg);
       }
     }
 
@@ -162,7 +162,7 @@ $popover-arrow-height:              .5rem !default;
       width: var(--#{$prefix}popover-arrow-width);
       margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
       content: "";
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+      border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
 
@@ -180,12 +180,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
+        border-inline-start-color: var(--#{$prefix}popover-bg);
       }
     }
   }
@@ -214,7 +214,7 @@ $popover-arrow-height:              .5rem !default;
     @include font-size(var(--#{$prefix}popover-header-font-size));
     color: var(--#{$prefix}popover-header-color);
     background-color: var(--#{$prefix}popover-header-bg);
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 
     &:empty {
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 257109303a..b246e74788 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -47,7 +47,7 @@ $spinner-border-width-sm: .2em !default;
     // scss-docs-end spinner-border-css-vars
 
     border: var(--#{$prefix}spinner-border-width) solid currentcolor;
-    border-right-color: transparent;
+    border-inline-end-color: transparent;
   }
 
   .spinner-border-sm {
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index c9eb2bad4e..ab5d19dc1e 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -82,7 +82,7 @@ $toast-header-border-color:         $toast-border-color !default;
     color: var(--#{$prefix}toast-header-color);
     background-color: var(--#{$prefix}toast-header-bg);
     background-clip: padding-box;
-    border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
     @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
     .btn-close {
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 2c36aa3f58..2f8788f35e 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -82,7 +82,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       top: -1px;
       border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-top-color: var(--#{$prefix}tooltip-bg);
+      border-block-start-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
@@ -95,7 +95,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       right: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-right-color: var(--#{$prefix}tooltip-bg);
+      border-inline-end-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
@@ -107,7 +107,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       bottom: -1px;
       border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-bottom-color: var(--#{$prefix}tooltip-bg);
+      border-block-end-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
@@ -120,7 +120,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       left: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-left-color: var(--#{$prefix}tooltip-bg);
+      border-inline-start-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss
index bf119e73e8..40480d5e4b 100644
--- a/scss/content/_prose.scss
+++ b/scss/content/_prose.scss
@@ -35,7 +35,7 @@
     hr {
       margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
       border: 0;
-      border-top: 1px solid var(--#{$prefix}border-color);
+      border-block-start: 1px solid var(--#{$prefix}border-color);
     }
 
     h1,
@@ -108,7 +108,7 @@
     blockquote {
       padding-inline-start: calc(var(--#{$prefix}content-gap) / 2);
       margin: 0;
-      border-left: 4px solid var(--#{$prefix}border-color);
+      border-inline-start: 4px solid var(--#{$prefix}border-color);
     }
 
     table {
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index 8552446561..14e9ecd2f8 100644
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -76,7 +76,7 @@
     margin: $hr-margin-y 0;
     color: $hr-color; // 1
     border: 0;
-    border-top: $hr-border-width solid $hr-border-color;
+    border-block-start: $hr-border-width solid $hr-border-color;
     opacity: $hr-opacity;
   }
 
@@ -371,7 +371,7 @@
     // color: $table-caption-color;
     padding-block: .5rem;
     color: var(--#{$prefix}secondary-color);
-    text-align: left;
+    text-align: start;
   }
 
   // 1. Removes font-weight bold by inheriting
@@ -509,13 +509,13 @@
     border: 0; // 2
   }
 
-  // 1. By using `float: left`, the legend will behave like a block element.
+  // 1. By using `float: inline-start`, the legend will behave like a block element.
   //    This way the border of a fieldset wraps around the legend if present.
   // 2. Fix wrapping bug.
   //    See https://github.com/twbs/bootstrap/issues/29712
 
   legend {
-    float: left; // 1
+    float: inline-start; // 1
     width: 100%;
     padding: 0;
     margin-bottom: $legend-margin-bottom;
@@ -524,7 +524,7 @@
     @include font-size($legend-font-size);
 
     + * {
-      clear: left; // 2
+      clear: inline-start; // 2
     }
   }
 
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index b3ca3d16da..b3a2c42051 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -88,7 +88,7 @@ $table-group-separator-color: currentcolor !default;
       // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
       color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
       background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
-      border-bottom-width: $table-border-width;
+      border-block-end-width: $table-border-width;
       box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
     }
 
@@ -102,7 +102,7 @@ $table-group-separator-color: currentcolor !default;
   }
 
   .table-group-divider {
-    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
   }
 
   //
@@ -149,11 +149,11 @@ $table-group-separator-color: currentcolor !default;
   .table-borderless {
     // stylelint-disable-next-line selector-max-universal
     > :not(caption) > * > * {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
 
     > :not(:first-child) {
-      border-top-width: 0;
+      border-block-start-width: 0;
     }
   }
 
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index dbcfa05500..7b238c2d83 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -32,53 +32,53 @@
 
 @mixin border-top-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-top-right-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 // scss-docs-end border-radius-mixins
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index 230c28d031..3ab770252e 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -9,30 +9,30 @@ $caret-spacing:               $caret-width * .85 !default;
 
 // scss-docs-start caret-mixins
 @mixin caret-down($width: $caret-width) {
-  border-top: $width solid;
-  border-right: $width solid transparent;
-  border-bottom: 0;
-  border-left: $width solid transparent;
+  border-block-start: $width solid;
+  border-block-end: 0;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-up($width: $caret-width) {
-  border-top: 0;
-  border-right: $width solid transparent;
-  border-bottom: $width solid;
-  border-left: $width solid transparent;
+  border-block-start: 0;
+  border-block-end: $width solid;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-end($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: 0;
-  border-bottom: $width solid transparent;
-  border-left: $width solid;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-start: $width solid;
+  border-inline-end: 0;
 }
 
 @mixin caret-start($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: $width solid;
-  border-bottom: $width solid transparent;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-end: $width solid;
 }
 
 @mixin caret(
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index 6b804e49f2..efb7d277aa 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -17,7 +17,7 @@
     overflow: hidden;
     @include font-size(.8125rem);
     line-height: 1.4;
-    text-align: left;
+    text-align: start;
     background-color: var(--bs-bg-1);
 
     a {
@@ -31,19 +31,19 @@
   }
 
   .carbon-img {
-    float: left;
-    margin-left: -145px;
+    float: inline-start;
+    margin-inline-start: -145px;
   }
 
   @container (max-width: 240px) {
     #carbonads {
-      padding-left: 15px;
+      padding-inline-start: 15px;
     }
 
     .carbon-img {
       display: block;
       float: none;
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     .carbon-wrap {
diff --git a/site/src/scss/_brand.scss b/site/src/scss/_brand.scss
index 62844c21c7..e95b24cc4b 100644
--- a/site/src/scss/_brand.scss
+++ b/site/src/scss/_brand.scss
@@ -21,13 +21,13 @@
   // Individual items
   .bd-brand-item {
     + .bd-brand-item {
-      border-top: 1px solid var(--bs-border-color);
+      border-block-start: 1px solid var(--bs-border-color);
     }
 
     @include media-breakpoint-up(md) {
       + .bd-brand-item {
-        border-top: 0;
-        border-left: 1px solid var(--bs-border-color);
+        border-block-start: 0;
+        border-inline-start: 1px solid var(--bs-border-color);
       }
     }
   }
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index 25c2f68d9a..20d8076ced 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -21,7 +21,7 @@
     // color: var(--bd-callout-color, inherit);
     background-color: var(--bd-callout-bg, var(--bs-gray-100));
     border: 1px solid var(--bd-callout-border, var(--bs-border-color));
-    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+    border-inline-start: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
     @include border-radius(var(--bs-border-radius));
     // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
 
diff --git a/site/src/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss
index 968b91d892..e89b82edf5 100644
--- a/site/src/scss/_clipboard-js.scss
+++ b/site/src/scss/_clipboard-js.scss
@@ -10,7 +10,7 @@
   .bd-edit {
     position: relative;
     display: none;
-    float: right;
+    float: inline-end;
 
     + .highlight {
       margin-top: 0;
@@ -43,7 +43,7 @@
   .btn-clipboard {
     position: relative;
     z-index: 2;
+    margin-inline-end: .5rem;
     margin-top: .5rem;
-    margin-right: .5rem;
   }
 }
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index cfb6f214e0..796151aeef 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -16,8 +16,7 @@
     border-width: 1px 0;
 
     @include media-breakpoint-up(md) {
-      margin-right: 0;
-      margin-left: 0;
+      margin-inline: 0;
       border-width: 1px;
       @include border-radius(var(--bs-border-radius));
     }
@@ -36,8 +35,7 @@
     @include media-breakpoint-up(md) {
       --bd-example-padding: 1.5rem;
 
-      margin-right: 0;
-      margin-left: 0;
+      margin-inline: 0;
       border-width: 1px;
       @include border-radius(var(--bs-border-radius));
     }
@@ -76,7 +74,7 @@
     // Images
     > svg + svg,
     > img + img {
-      margin-left: .5rem;
+      margin-inline-start: .5rem;
     }
 
     // Buttons
@@ -124,8 +122,7 @@
   .bd-example-row [class^="col"],
   .bd-example-cols [class^="col"] > *,
   .bd-example-cssgrid [class*="grid"] > * {
-    padding-top: .75rem;
-    padding-bottom: .75rem;
+    padding-block: .75rem;
     background-color: color-mix(in srgb, var(--bd-violet) 15%, transparent);
     border: 1px solid color-mix(in srgb, var(--bd-violet) 30%, transparent);
   }
@@ -368,7 +365,7 @@
 
     @include media-breakpoint-up(lg) {
       pre {
-        margin-right: 1.875rem;
+        margin-inline-end: 1.875rem;
       }
     }
 
@@ -390,7 +387,7 @@
   }
 
   .bd-example-snippet .highlight pre {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   .highlight-toolbar {
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index 195bda400c..e367c0c4ed 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -48,7 +48,7 @@
       font-size: .75rem;
 
       thead th {
-        border-bottom-color: currentcolor;
+        border-block-end-color: currentcolor;
       }
 
       th,
@@ -89,17 +89,17 @@
       th,
       td {
         &:first-child {
-          padding-left: 0;
+          padding-inline-start: 0;
         }
 
         &:not(:last-child) {
-          padding-right: 1.5rem;
+          padding-inline-end: 1.5rem;
         }
       }
 
       th {
         color: var(--bs-emphasis-color);
-        border-bottom-color: currentcolor;
+        border-block-end-color: currentcolor;
       }
 
       &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
@@ -153,7 +153,7 @@
 
   .border-lg-start {
     @include media-breakpoint-up(lg) {
-      border-left: var(--bs-border-width) solid var(--bs-border-color);
+      border-inline-start: var(--bs-border-width) solid var(--bs-border-color);
     }
   }
 
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index ce6ca4779e..dc582e78ab 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -46,7 +46,7 @@
       @include border-radius(calc(.5rem - 1px));
 
       @include media-breakpoint-up(lg) {
-        padding-right: 4rem;
+        padding-inline-end: 4rem;
       }
 
       pre {
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index dc108993bc..eff17fa2b1 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -34,11 +34,11 @@
 
     .navbar-toggler {
       padding: 0;
-      margin-right: -.5rem;
+      margin-inline-end: -.5rem;
       border: 0;
 
       &:first-child {
-        margin-left: -.5rem;
+        margin-inline-start: -.5rem;
       }
 
       .bi {
@@ -62,8 +62,7 @@
 
     .navbar-toggler,
     .nav-link {
-      padding-right: $spacer * .25;
-      padding-left: $spacer * .25;
+      padding-inline: $spacer * .25;
       color: rgba($white, .85);
 
       &:hover,
@@ -84,7 +83,7 @@
 
     .offcanvas-lg {
       background-color: var(--bd-violet-bg);
-      border-left: 0;
+      border-inline-start: 0;
 
       @include media-breakpoint-down(lg) {
         box-shadow: var(--#{$prefix}box-shadow-lg);
diff --git a/site/src/scss/_scrolling.scss b/site/src/scss/_scrolling.scss
index a0435ca7d6..913bb2feb5 100644
--- a/site/src/scss/_scrolling.scss
+++ b/site/src/scss/_scrolling.scss
@@ -11,8 +11,8 @@
     h3,
     h4,
     [tabindex="0"] {
-      scroll-margin-top: 80px;
-      scroll-margin-bottom: 100px;
+      scroll-margin-block-start: 80px;
+      scroll-margin-block-end: 100px;
     }
   }
 }
diff --git a/site/src/scss/_search.scss b/site/src/scss/_search.scss
index d82787e266..be3db084ca 100644
--- a/site/src/scss/_search.scss
+++ b/site/src/scss/_search.scss
@@ -40,12 +40,12 @@
       top: .875rem;
       left: 50%;
       width: 200px;
-      margin-left: -100px;
+      margin-inline-start: -100px;
     }
 
     @include media-breakpoint-up(xl) {
       width: 280px;
-      margin-left: -140px;
+      margin-inline-start: -140px;
     }
 
   }
@@ -59,7 +59,7 @@
     cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
 
     @include media-breakpoint-up(lg) {
-      padding-top: 4rem;
+      padding-block-start: 4rem;
     }
   }
 
@@ -123,16 +123,15 @@
     top: 0;
     width: auto;
     height: 1.25rem;
-    padding-right: .125rem;
-    padding-left: .125rem;
-    margin-right: 0;
+    padding-inline: .125rem;
+    margin-inline-end: 0;
     font-size: .875rem;
     background: none;
     box-shadow: none;
   }
 
   .DocSearch-Commands-Key {
-    padding-left: 1px;
+    padding-inline-start: 1px;
     font-size: .875rem;
     background-color: rgba($black, .1);
     background-image: none;
@@ -150,7 +149,7 @@
   }
 
   .DocSearch-Hit {
-    padding-bottom: 0;
+    padding-block-end: 0;
     @include border-radius(0);
 
     a {
diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index bf0f33ff1f..63ad033a89 100644
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -12,14 +12,14 @@
       display: block !important;
       height: calc(100vh - 6rem);
       // Prevent focus styles to be cut off:
-      padding-left: .25rem;
-      margin-left: -.25rem;
+      padding-inline-start: .25rem;
+      margin-inline-start: -.25rem;
       overflow-y: auto;
     }
 
     @include media-breakpoint-down(lg) {
       .offcanvas-lg {
-        border-right-color: var(--bs-border-color);
+        border-inline-end-color: var(--bs-border-color);
         box-shadow: var(--bs-box-shadow-lg);
       }
     }
@@ -34,7 +34,7 @@
   }
 
   .bd-links-subgroup {
-    margin-left: 1.5rem;
+    margin-inline-start: 1.5rem;
     color: var(--bs-emphasis-color);
   }
 
@@ -59,8 +59,8 @@
 
   .bd-links-link {
     padding: .1875rem .5rem;
+    margin-inline-start: 1rem;
     margin-top: .125rem;
-    margin-left: 1rem;
     font-size: .875rem;
     color: var(--bs-body-color);
     text-decoration: none;
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 6d126bc3da..3334f67cef 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -22,12 +22,12 @@
       // @include font-size(.875rem);
 
       ul {
-        padding-left: 0;
+        padding-inline-start: 0;
         margin-bottom: 0;
         list-style: none;
 
         ul {
-          padding-left: 1rem;
+          padding-inline-start: 1rem;
         }
       }
 
@@ -36,12 +36,12 @@
         padding: .125rem 0 .125rem .75rem;
         color: inherit;
         text-decoration: none;
-        border-left: .125rem solid transparent;
+        border-inline-start: .125rem solid transparent;
 
         &:hover,
         &.active {
           color: var(--bd-toc-color);
-          border-left-color: var(--bd-toc-color);
+          border-inline-start-color: var(--bd-toc-color);
         }
 
         &.active {
-- 
2.47.3