diff --git a/src/pages/_includes/ui/chart.html b/src/pages/_includes/ui/chart.html
index c13d9c8df..f01f004fa 100644
--- a/src/pages/_includes/ui/chart.html
+++ b/src/pages/_includes/ui/chart.html
@@ -112,6 +112,10 @@
 			{% endif %}
 			{% endif %}
 
+			tooltip: {
+				theme: 'dark'
+			},
+
 			grid: {
 				{% unless data.sparkline %}
 				padding: {
diff --git a/src/pages/_includes/ui/nav.html b/src/pages/_includes/ui/nav.html
index ce18f83d4..31f6b066d 100644
--- a/src/pages/_includes/ui/nav.html
+++ b/src/pages/_includes/ui/nav.html
@@ -6,7 +6,7 @@
    </li>
    <li class="nav-item">
       <a class="nav-link" href="#">
-         {% include ui/icon.html icon="star" class="me-1" %}
+         {% include ui/icon.html icon="star" class="nav-link-icon" %}
          Link
       </a>
    </li>
diff --git a/src/pages/cards.html b/src/pages/cards.html
index 20794c5bd..f4ebe88d5 100644
--- a/src/pages/cards.html
+++ b/src/pages/cards.html
@@ -106,7 +106,7 @@ menu: base.cards.base
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		<div class="card bg-primary">
+		<div class="card bg-primary text-primary-fg">
 			<div class="card-stamp">
 				<div class="card-stamp-icon bg-white text-primary">
 					{% include ui/icon.html icon="star" %}
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 256fad217..b9aec61a2 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,8 +1,8 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
 
 $border-values: (
-  null: $border-width solid $border-color-translucent,
-  wide: $border-width-wide solid $border-color-translucent,
+  null: $border-width var(--#{$prefix}border-style) $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
   0: 0,
 );
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ca23bcd1b..65b04e11d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -37,8 +37,6 @@ $font-size-500: 1.75rem !default;
 $font-size-600: 2rem !default;
 $font-size-700: 2.5rem !default;
 
-
-
 $line-height-100: 1rem !default;
 $line-height-200: 1.25rem !default;
 $line-height-300: 1.5rem !default;
@@ -47,8 +45,6 @@ $line-height-500: 2rem !default;
 $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
-
-
 $font-size-base: .875rem !default;
 $body-letter-spacing: 0 !default;
 
@@ -57,7 +53,7 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
 $font-weights: (
   light: $font-weight-light,
@@ -71,25 +67,25 @@ $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
 $line-height-lg: divide(1.5rem, $font-size-base) !default;
 
-$h1-font-size: divide(24rem, 16) !default;
-$h1-line-height: divide(2rem, $h1-font-size) !default;
+$h1-font-size: 1.5rem !default;
+$h1-line-height: 2rem !default;
 
-$h2-font-size: divide(20rem, 16) !default;
-$h2-line-height: divide(1.75rem, $h2-font-size) !default;
+$h2-font-size: 1.25rem !default;
+$h2-line-height: 1.75rem !default;
 
-$h3-font-size: divide(16rem, 16) !default;
-$h3-line-height: divide(1.5rem, $h3-font-size) !default;
+$h3-font-size: 1rem !default;
+$h3-line-height: 1.5rem !default;
 
-$h4-font-size: $font-size-base !default;
-$h4-line-height: divide(1.25rem, $h4-font-size) !default;
+$h4-font-size: .875rem !default;
+$h4-line-height: 1.25rem !default;
 
-$h5-font-size: divide(12rem, 16) !default;
-$h5-line-height: divide(1rem, $h5-font-size) !default;
+$h5-font-size: .75rem !default;
+$h5-line-height: 1rem !default;
 
-$h6-font-size: divide(10rem, 16) !default;
-$h6-line-height: divide(1rem, $h6-font-size) !default;
+$h6-font-size: .625rem !default;
+$h6-line-height: 1rem !default;
 
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
+$small-font-size: 85.714285% !default;
 
 $font-sizes: (
   h1: $h1-font-size,
@@ -190,9 +186,12 @@ $border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$active-bg: var(--#{$prefix}gray-100) !default;
+
 $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
+
 $disabled-bg: var(--#{$prefix}gray-100) !default;
+$disabled-color: var(--#{$prefix}gray-300) !default;
 
 $link-color: var(--#{$prefix}primary) !default;
 $link-hover-color: var(--#{$prefix}primary-darken) !default;
@@ -267,7 +266,7 @@ $theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors)
 // Dark mode
 $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
-$dark-mode-border-color: lighten($dark, 8%) !default;
+$dark-mode-border-color: lighten($dark, 4%) !default;
 $dark-mode-border-color-light: lighten($dark, 4%) !default;
 $dark-mode-text: $light;
 
@@ -292,6 +291,11 @@ $code-bg: var(--#{$prefix}gray-100) !default;
 $pre-padding: 1rem !default;
 $pre-bg: $code-bg !default;
 
+$kbd-padding-y: 2px !default;
+$kbd-color: var(--#{$prefix}muted) !default;
+$kbd-bg: transparent !default;
+$kbd-border-radius: var(--#{$prefix}border-radius) !default;
+
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (
@@ -464,7 +468,7 @@ $card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
-$card-color: var(--#{$prefix}bg-surface) !default;
+$card-color: inherit !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color) !default;
@@ -524,6 +528,9 @@ $dropdown-scrollable-height: 13rem !default;
 $dropdown-link-active-color: var(--#{$prefix}primary)  !default;
 $dropdown-link-active-bg: $active-bg !default;
 
+//tooltip
+$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
+$tooltip-color: var(--#{$prefix}white) !default;
 
 //loader
 $loader-size: 2.5rem !default;
@@ -566,7 +573,8 @@ $modal-sm: 380px !default;
 //nav
 $nav-link-padding-y: .5rem !default;
 $nav-link-padding-x: .75rem !default;
-$nav-link-color: inherit !default;
+$nav-link-color: var(--#{$prefix}muted) !default;
+$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
 $nav-link-icon-color: var(--#{$prefix}icon-color) !default;
 
@@ -580,6 +588,11 @@ $nav-bordered-link-active-border-color: var(--#{$prefix}primary)  !default;
 $nav-bordered-link-active-border-width: 2 * $border-width !default;
 $nav-bordered-margin-x: 1.25rem !default;
 
+$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
+$nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+
 
 //navbar
 $navbar-height: 3.5rem !default;
@@ -591,12 +604,12 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color)color !default;
-$navbar-light-disabled-color: rgba($body-color, .3) !default;
+$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $navbar-dark-color: rgba($white, $text-muted-opacity) !default;
 $navbar-dark-brand-color: $white !default;
 $navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .3) !default;
+$navbar-dark-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
@@ -636,7 +649,7 @@ $pagination-padding-x: .25rem !default;
 $pagination-color: var(--#{$prefix}muted) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
-$pagination-disabled-color: rgba($text-muted, .5) !default;
+$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $pagination-active-bg: var(--#{$prefix}primary) !default;
 $pagination-active-border-color: var(--#{$prefix}primary) !default;
@@ -715,7 +728,7 @@ $form-check-margin-bottom: .5rem !default;
 $form-check-input-width: 1rem !default;
 $form-check-padding-start: $form-check-input-width + .5rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
-$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color-translucent !default;
+$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-checked-bg-size: 1rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
@@ -740,7 +753,7 @@ $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
 $form-range-track-bg: var(--#{$prefix}border-color) !default;
-$form-range-thumb-border: 2px solid $white !default;
+$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
 $form-range-thumb-bg: var(--#{$prefix}primary) !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
index c4b3ea73f..a83e073f5 100644
--- a/src/scss/demo.scss
+++ b/src/scss/demo.scss
@@ -85,8 +85,8 @@ $demo-icon-size: 4rem;
   aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
-  border-right: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -121,7 +121,7 @@ $demo-icon-size: 4rem;
   height: 3rem;
   width: 3rem;
   position: relative;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   box-shadow: $shadow;
 
   &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss
index 0c1f51dfd..f9b47fb6d 100644
--- a/src/scss/demo/_examples.scss
+++ b/src/scss/demo/_examples.scss
@@ -1,7 +1,7 @@
 .example {
   padding: 2rem;
   margin: 1rem 0 2rem;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: 3px 3px 0 0;
   position: relative;
 
@@ -37,7 +37,7 @@
 
 .example-code {
   margin: 2rem 0;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-top: none;
 
   pre {
diff --git a/src/scss/demo/_highlight.scss b/src/scss/demo/_highlight.scss
index b54a81978..45b7214d2 100644
--- a/src/scss/demo/_highlight.scss
+++ b/src/scss/demo/_highlight.scss
@@ -58,7 +58,7 @@ pre.highlight,
 
   .gd {
     background-color: #fcc;
-    border: var(--#{$prefix}border-width) solid #c00
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #c00
   }
 
   .ge {
@@ -71,7 +71,7 @@ pre.highlight,
 
   .gi {
     background-color: #cfc;
-    border: var(--#{$prefix}border-width) solid #0c0
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) #0c0
   }
 
   .gl {
diff --git a/src/scss/layout/_core.scss b/src/scss/layout/_core.scss
index 681f4f7bb..0c66889e2 100644
--- a/src/scss/layout/_core.scss
+++ b/src/scss/layout/_core.scss
@@ -50,7 +50,7 @@ body {
     color: $body-color;
 
     @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
       background: var(--#{$prefix}body-bg);
     }
 
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index 7822a861c..0cc4c3053 100644
--- a/src/scss/layout/_dark.scss
+++ b/src/scss/layout/_dark.scss
@@ -14,12 +14,14 @@ body:not(.theme-dark) .hide-theme-light {
   & {
     --#{$prefix}body-color: #{$dark-mode-text};
     --#{$prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
+    --#{$prefix}muted: rgba(153, 159, 164, 1);
 
     --#{$prefix}body-bg: #{$dark-mode-darken};
     --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
 
     --#{$prefix}bg-forms: #{$dark-mode-darken};
     --#{$prefix}bg-surface: #{$dark};
+    --#{$prefix}bg-surface-dark: #{$dark-mode-darken};
     --#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
 
     --#{$prefix}card-bg: #{$dark-mode-darken};
@@ -148,17 +150,6 @@ body:not(.theme-dark) .hide-theme-light {
     color: inherit !important;
   }
 
-  .apexcharts-tooltip {
-    background: $dark !important;
-    border: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
-    box-shadow: 2px 2px 6px -4px $dark-mode-darken !important;
-
-    .apexcharts-tooltip-title {
-      background: $dark !important;
-      border-bottom: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
-    }
-  }
-
   .navbar-brand-autodark {
     @include autodark-image;
   }
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
index 09b3459cb..41f502f2f 100644
--- a/src/scss/layout/_footer.scss
+++ b/src/scss/layout/_footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  border-top: var(--#{$prefix}border-width) solid $footer-border-color;
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
   background-color: $footer-bg;
   padding: $footer-padding-y 0;
   color: $footer-color;
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index a3f728b3c..0bcbe4d71 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -228,7 +228,7 @@ Navbar
               left: 0;
               right: 0;
               bottom: -.25rem;
-              border: 0 solid var(--#{$prefix}navbar-active-border-color);
+              border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
               border-bottom-width: 2px;
             }
           }
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index 784a31e72..888514b00 100644
--- a/src/scss/layout/_page.scss
+++ b/src/scss/layout/_page.scss
@@ -34,7 +34,7 @@
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
-  border-top: var(--#{$prefix}border-width) solid $card-border-color;
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
   padding: $content-padding-y 0;
   margin-bottom: 0;
   flex: 1;
@@ -85,7 +85,7 @@
 }
 
 .page-header-border {
-  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   padding: $content-padding-y 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 91876aaa0..ea43b9ebc 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -19,7 +19,11 @@
   --#{$prefix}border-color-light: #{$border-color-light};
 
   --#{$prefix}icon-color: #{$icon-color};
+
+  --#{$prefix}active-bg: #{$active-bg};
+
   --#{$prefix}disabled-bg: #{$disabled-bg};
+  --#{$prefix}disabled-color: #{$disabled-color};
 
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
diff --git a/src/scss/ui/_alerts.scss b/src/scss/ui/_alerts.scss
index 26cae4f71..6229acbef 100644
--- a/src/scss/ui/_alerts.scss
+++ b/src/scss/ui/_alerts.scss
@@ -1,8 +1,8 @@
 .alert {
   --#{$prefix}alert-color: #{$text-muted};
   background: $white;
-  border: $alert-border-width solid $alert-border-color;
-  border-left: .25rem solid var(--#{$prefix}alert-color);
+  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
+  border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
   box-shadow: $alert-shadow;
 
   >:last-child {
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 062fd0ce2..1aaa249c1 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -75,7 +75,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    box-shadow: 0 0 0 2px 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
   }
 }
 
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 60b048918..7883ee890 100644
--- a/src/scss/ui/_badges.scss
+++ b/src/scss/ui/_badges.scss
@@ -4,7 +4,7 @@
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  border: var(--#{$prefix}border-width) solid transparent;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
   min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
   letter-spacing: .04em;
@@ -49,7 +49,7 @@
 // bordered
 .badge-outline {
   background-color: transparent;
-  border: var(--#{$prefix}border-width) solid currentColor;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
 }
 
 .badge-pill {
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index b714e8cf9..0151633d5 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -176,7 +176,7 @@
     content: '';
     display: inline-block;
     vertical-align: text-bottom;
-    border: $spinner-border-width solid currentColor;
+    border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
     border-right-color: transparent;
     border-radius: $border-radius-pill;
     color: var(--#{$prefix}btn-color);
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 9e6fcde4f..8d8f695e1 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -1,7 +1,7 @@
 .calendar {
   display: block;
   font-size: $font-size-sm;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
 
@@ -52,7 +52,7 @@
     vertical-align: middle;
     cursor: pointer;
     background: 0 0;
-    border: var(--#{$prefix}border-width) solid transparent;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
     border-radius: $border-radius-pill;
     outline: 0;
     @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 55b7b1980..3aa84ea42 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -1,12 +1,4 @@
 .card {
-  --#{$prefix}card-border-radius: var(--#{$prefix}border-radius);
-  --#{$prefix}card-bg: var(--#{$prefix}bg-surface);
-  --#{$prefix}card-color: var(--#{$prefix}body-color);
-
-  border: $card-border-width solid $card-border-color;
-  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  border-radius: var(--#{$prefix}card-border-radius);
-  box-shadow: var(--#{$prefix}card-box-shadow);
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
   @media print {
@@ -39,12 +31,12 @@
 
 // Card stamp
 .card-stamp {
-  --stamp-size: 7rem;
+  --#{$prefix}stamp-size: 7rem;
   position: absolute;
   top: 0;
   right: 0;
-  width: calc(var(--stamp-size) * 1);
-  height: calc(var(--stamp-size) * 1);
+  width: calc(var(--#{$prefix}stamp-size) * 1);
+  height: calc(var(--#{$prefix}stamp-size) * 1);
   max-height: 100%;
   border-top-right-radius: $border-radius;
   opacity: $card-stamp-opacity;
@@ -53,7 +45,7 @@
 }
 
 .card-stamp-lg {
-  --stamp-size: 13rem;
+  --#{$prefix}stamp-size: 13rem;
 }
 
 .card-stamp-icon {
@@ -63,18 +55,18 @@
   align-items: center;
   justify-content: center;
   border-radius: $border-radius-pill;
-  width: calc(var(--stamp-size) * 1);
-  height: calc(var(--stamp-size) * 1);
+  width: calc(var(--#{$prefix}stamp-size) * 1);
+  height: calc(var(--#{$prefix}stamp-size) * 1);
   position: relative;
-  top: calc(var(--stamp-size) * -.25);
-  right: calc(var(--stamp-size) * -.25);
-  font-size: calc(var(--stamp-size) * .75);
+  top: calc(var(--#{$prefix}stamp-size) * -.25);
+  right: calc(var(--#{$prefix}stamp-size) * -.25);
+  font-size: calc(var(--#{$prefix}stamp-size) * .75);
   transform: rotate(10deg);
 
   .icon {
     stroke-width: 2;
-    width: calc(var(--stamp-size) * .75);
-    height: calc(var(--stamp-size) * .75);
+    width: calc(var(--#{$prefix}stamp-size) * .75);
+    height: calc(var(--#{$prefix}stamp-size) * .75);
   }
 }
 
@@ -109,20 +101,8 @@
 }
 
 .card-active {
-  position: relative;
-  background-color: rgba(var(--#{$prefix}primary-rgb), .03);
-  z-index: 1;
-
-  &:before {
-    position: absolute;
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
-    content: "";
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}primary);
-    border-radius: inherit;
-  }
+  --#{$prefix}card-border-color: var(--#{$prefix}primary);
+  --#{$prefix}card-bg: var(--#{$prefix}active-bg);
 }
 
 .card-btn {
@@ -132,7 +112,7 @@
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
   @include transition(background $transition-time);
-  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   flex: 1;
   color: inherit;
   font-weight: var(--#{$prefix}font-weight-medium);
@@ -143,22 +123,26 @@
   }
 
   & + & {
-    border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
 
+/**
+Stacked card
+ */
 .card-stacked {
+  --#{$prefix}card-stacked-offset: .25rem;
   position: relative;
 
   &:after {
     position: absolute;
-    top: -5px;
-    right: 5px;
-    left: 5px;
-    height: 5px;
+    top: calc(-1 * var(--#{$prefix}card-stacked-offset));
+    right: var(--#{$prefix}card-stacked-offset);
+    left: var(--#{$prefix}card-stacked-offset);
+    height: var(--#{$prefix}card-stacked-offset);
     content: "";
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}card-border-color);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
     border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
   }
 }
@@ -326,6 +310,8 @@
 }
 
 .card-body {
+  position: relative;
+
   > :last-child {
     margin-bottom: 0;
   }
@@ -355,7 +341,7 @@
   }
 
   & + & {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
 
@@ -448,7 +434,7 @@ Card table
   }
 
   .card-body + & {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}table-border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
 
@@ -493,7 +479,7 @@ Card list group
  */
 .card-list-group {
   .card-body + & {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
   .list-group-item {
@@ -521,9 +507,8 @@ Card list group
     border-bottom: 0;
 
     .nav-link {
-      color: $text-muted;
       background: $card-cap-bg;
-      border: $card-border-width solid $card-border-color;
+      border: $card-border-width var(--#{$prefix}border-style) $card-border-color;
 
       &.active,
       &:active,
@@ -553,7 +538,7 @@ Card list group
       }
 
       + .nav-item {
-        margin-left: -1px;
+        margin-left: calc(-1 * #{$card-border-width});
       }
     }
   }
@@ -570,11 +555,11 @@ Card list group
     }
 
     .nav-item {
-      margin-top: -$card-border-width;
+      margin-top: calc(-1 * #{$card-border-width});
       margin-bottom: 0;
 
       .nav-link {
-        border-bottom: $card-border-width solid $card-border-color;
+        border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color;
         border-radius: 0 0 $card-border-radius $card-border-radius;
       }
 
diff --git a/src/scss/ui/_carousel.scss b/src/scss/ui/_carousel.scss
index b02869dd0..bf397ea1e 100644
--- a/src/scss/ui/_carousel.scss
+++ b/src/scss/ui/_carousel.scss
@@ -13,8 +13,8 @@
     width: $carousel-indicator-height;
     height: $carousel-indicator-width;
     border: 0;
-    border-left: $carousel-indicator-hit-area-height solid transparent;
-    border-right: $carousel-indicator-hit-area-height solid transparent;
+    border-left: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
+    border-right: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
   }
 }
 
@@ -23,7 +23,7 @@
     width: $carousel-indicator-dot-width;
     height: $carousel-indicator-dot-width;
     border-radius: $border-radius-pill;
-    border: $carousel-indicator-hit-area-height solid transparent;
+    border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
     margin: 0;
   }
 }
diff --git a/src/scss/ui/_empty.scss b/src/scss/ui/_empty.scss
index bd23b1558..cb7339b28 100644
--- a/src/scss/ui/_empty.scss
+++ b/src/scss/ui/_empty.scss
@@ -60,6 +60,6 @@
 
 
 .empty-bordered {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
diff --git a/src/scss/ui/_flags.scss b/src/scss/ui/_flags.scss
index d400441c0..252ad650a 100644
--- a/src/scss/ui/_flags.scss
+++ b/src/scss/ui/_flags.scss
@@ -24,7 +24,7 @@ $countries: (
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: $flag-border-size solid $flag-border-color;
+  border: $flag-border-size var(--#{$prefix}border-style) $flag-border-color;
   border-radius: $flag-border-radius;
 }
 
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index a12c2bc51..d4ea57ff1 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -140,7 +140,7 @@ Form control
   padding: 1rem;
   margin-bottom: 1rem;
   background: var(--#{$prefix}body-bg);
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
 
diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
index 4251c7992..b26ccf281 100644
--- a/src/scss/ui/_grid.scss
+++ b/src/scss/ui/_grid.scss
@@ -3,7 +3,7 @@
 }
 
 .col-separator {
-  border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 %container-common {
@@ -90,7 +90,7 @@
 
   .divide-y#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-top: var(--#{$prefix}border-width) solid $border-color-translucent !important;
+      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {
@@ -104,7 +104,7 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: var(--#{$prefix}border-width) solid $border-color-translucent !important;
+      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index 7347a505d..f8040c4d7 100644
--- a/src/scss/ui/_lists.scss
+++ b/src/scss/ui/_lists.scss
@@ -11,7 +11,7 @@
   line-height: 1;
   text-transform: uppercase;
   color: $list-group-header-color;
-  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -48,7 +48,7 @@
 
 .list-bordered {
   .list-item {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     margin-top: -1px;
 
     &:first-child {
@@ -203,7 +203,7 @@ Timeline
   }
 
   & + & {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
 
diff --git a/src/scss/ui/_modals.scss b/src/scss/ui/_modals.scss
index 8fc28bded..5aef5269f 100644
--- a/src/scss/ui/_modals.scss
+++ b/src/scss/ui/_modals.scss
@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
 
diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss
index f5468b637..ccdb66103 100644
--- a/src/scss/ui/_nav.scss
+++ b/src/scss/ui/_nav.scss
@@ -7,7 +7,7 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     padding-left: .5rem;
   }
 
@@ -25,7 +25,7 @@
 // Nav bordered
 //
 .nav-bordered {
-  border-bottom: $nav-bordered-border-width solid $nav-bordered-border-color;
+  border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
 
   .nav-item {
     + .nav-item {
@@ -38,7 +38,7 @@
     padding-right: 0;
     margin: 0 0 (- $nav-bordered-border-width );
     border: 0;
-    border-bottom: $nav-bordered-link-active-border-width solid transparent;
+    border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
     color: $text-muted;
   }
 
diff --git a/src/scss/ui/_offcanvas.scss b/src/scss/ui/_offcanvas.scss
index aa9516413..2c5444e1d 100644
--- a/src/scss/ui/_offcanvas.scss
+++ b/src/scss/ui/_offcanvas.scss
@@ -1,5 +1,5 @@
 .offcanvas-header {
-  border-bottom: var(--#{$prefix}border-width) solid $border-color-translucent;
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
 }
 
 .offcanvas-footer {
diff --git a/src/scss/ui/_status.scss b/src/scss/ui/_status.scss
index d7a48c754..fa67892db 100644
--- a/src/scss/ui/_status.scss
+++ b/src/scss/ui/_status.scss
@@ -69,7 +69,7 @@
 }
 
 .status-lite {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   background: transparent !important;
   color: var(--#{$prefix}body-text) !important;
 }
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index ccab4341b..4af755bab 100644
--- a/src/scss/ui/_steps.scss
+++ b/src/scss/ui/_steps.scss
@@ -81,7 +81,7 @@
     box-sizing: content-box;
     display: block;
     content: "";
-    border: 2px solid $card-bg;
+    border: 2px var(--#{$prefix}border-style) $card-bg;
     border-radius: $border-radius-pill;
     transform: translateX(-50%);
   }
diff --git a/src/scss/ui/_tables.scss b/src/scss/ui/_tables.scss
index 96b3b8ec0..6f70ad604 100644
--- a/src/scss/ui/_tables.scss
+++ b/src/scss/ui/_tables.scss
@@ -103,7 +103,7 @@
         }
 
         tr {
-          border-bottom: var(--#{$prefix}border-width) solid $table-border-color;
+          border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
         }
 
         .btn {
diff --git a/src/scss/ui/_toasts.scss b/src/scss/ui/_toasts.scss
index 9272a0b97..d369bad4f 100644
--- a/src/scss/ui/_toasts.scss
+++ b/src/scss/ui/_toasts.scss
@@ -1,6 +1,6 @@
 .toast {
   background: $white;
-  border: $alert-border-width solid $alert-border-color;
+  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   box-shadow: $alert-shadow;
 
   .toast-header {
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index c348ee001..daee8cd80 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -29,31 +29,40 @@ h6,
   }
 }
 
-h1 {
-  line-height: $h1-line-height;
+h1,
+.h1 {
+  font-size: var(--#{$prefix}font-size-h1);
+  line-height: var(--#{$prefix}line-height-h1);
 }
 
-h2 {
-  line-height: $h2-line-height;
+h2,
+.h2 {
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: var(--#{$prefix}line-height-h2);
 }
 
-h3 {
-  line-height: $h3-line-height;
+h3,
+.h3 {
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
 }
 
-h4 {
-  line-height: $h4-line-height;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h4,
+.h4 {
+  font-size: var(--#{$prefix}font-size-h4);
+  line-height: var(--#{$prefix}line-height-h4);
 }
 
-h5 {
-  line-height: $h5-line-height;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h5,
+.h5 {
+  font-size: var(--#{$prefix}font-size-h5);
+  line-height: var(--#{$prefix}line-height-h5);
 }
 
-h6 {
-  line-height: $h6-line-height;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h6,
+.h6 {
+  font-size: var(--#{$prefix}font-size-h6);
+  line-height: var(--#{$prefix}line-height-h6);
 }
 
 strong,
@@ -64,7 +73,7 @@ b {
 
 blockquote {
   padding-left: 1rem;
-  border-left: 2px solid var(--#{$prefix}border-color);
+  border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
     margin-bottom: 1rem;
@@ -113,10 +122,15 @@ code {
   border-radius: var(--#{$prefix}border-radius);
 }
 
-//code {
+kbd {
+  font: inherit;
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color), 0 3px 0 0 var(--#{$prefix}bg-surface), 0 3px 0 1px var(--#{$prefix}border-color);
+}
+
+  //code {
 //  padding: 2px 4px;
 //  background: rgba($code-color, .03);
-//  border: var(--#{$prefix}border-width) solid rgba($code-color, .064);
+//  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) rgba($code-color, .064);
 //  border-radius: var(--#{$prefix}border-radius);
 //  font-weight: var(--#{$prefix}font-weight-normal);
 //}
@@ -132,7 +146,7 @@ code {
 //  border-radius: var(--#{$prefix}border-radius);
 //  white-space: pre-wrap;
 //  background: mix($light, #ffffff, 50%);
-//  border: var(--#{$prefix}border-width) solid $border-color-translucent;
+//  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
 //  -webkit-font-smoothing: auto;
 //
 //  code {
diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
index cf7e8021f..63b363d3b 100644
--- a/src/scss/ui/forms/_form-colorinput.scss
+++ b/src/scss/ui/forms/_form-colorinput.scss
@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: $white;
-  border: var(--#{$prefix}border-width) solid $input-border-color-translucent;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
diff --git a/src/scss/ui/forms/_form-imagecheck.scss b/src/scss/ui/forms/_form-imagecheck.scss
index e9e71b3e4..17190201e 100644
--- a/src/scss/ui/forms/_form-imagecheck.scss
+++ b/src/scss/ui/forms/_form-imagecheck.scss
@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -43,7 +43,7 @@ Image check
     content: "";
     user-select: none;
     background: $form-check-input-bg;
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     border-radius: $form-check-input-border-radius;
     @include transition(opacity $transition-time);
 
diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
index ad9a70e57..09bf1820b 100644
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/src/scss/ui/forms/_form-selectgroup.scss
@@ -41,7 +41,7 @@ Select group
   text-align: center;
   cursor: pointer;
   user-select: none;
-  border: var(--#{$prefix}border-width) solid $input-border-color;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
   border-radius: 3px;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 2ba7f4131..cb3c9398d 100644
--- a/src/scss/utils/_colors.scss
+++ b/src/scss/utils/_colors.scss
@@ -14,6 +14,10 @@
   .text-#{"" + $color} {
     color: var(--#{$prefix}#{$color}) !important;
   }
+
+  .text-#{"" + $color}-fg {
+    color: var(--#{$prefix}#{$color}-fg) !important;
+  }
 }
 
 @each $color, $value in $gray-colors {
diff --git a/src/scss/vendor/_apexcharts.scss b/src/scss/vendor/_apexcharts.scss
index 95eebbd93..042839462 100644
--- a/src/scss/vendor/_apexcharts.scss
+++ b/src/scss/vendor/_apexcharts.scss
@@ -1,2 +1,28 @@
 .apexcharts-tooltip {
+  color: $tooltip-color !important;
+  background: $tooltip-bg !important;
+  font-size: $tooltip-font-size !important;
+  padding: .25rem !important;
+  box-shadow: none !important;
+}
+
+.apexcharts-tooltip-title {
+  background: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+  font-weight: var(--#{$prefix}font-weight-bold);
+  padding: .25rem .5rem !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 2px 0 !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 .5rem 0 !important;
+}
+
+.apexcharts-tooltip-marker {
+  width: 10px !important;
+  height: 10px !important;
 }
\ No newline at end of file
diff --git a/src/scss/vendor/_jsvectormap.scss b/src/scss/vendor/_jsvectormap.scss
index 289ab6993..8cdf1dc66 100644
--- a/src/scss/vendor/_jsvectormap.scss
+++ b/src/scss/vendor/_jsvectormap.scss
@@ -14,7 +14,7 @@
 
 .jvm-series-container .jvm-legend {
   background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,7 +29,7 @@
 }
 
 .jvm-zoom-btn {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   color: var(--#{$prefix}body-color);
   padding: 0;
diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
index bca478a7c..c0c9796f0 100644
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -18,7 +18,7 @@
   }
 
   .container__main {
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     border-radius: var(--#{$prefix}border-radius);
     box-shadow: none;
   }
diff --git a/src/scss/vendor/_tinymce.scss b/src/scss/vendor/_tinymce.scss
index 251aa8ed7..8f3ea3d69 100644
--- a/src/scss/vendor/_tinymce.scss
+++ b/src/scss/vendor/_tinymce.scss
@@ -1,5 +1,5 @@
 .tox-tinymce {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   border-radius: $border-radius !important;
   font-family: var(--#{$prefix}font-sans-serif) !important;
 }
@@ -10,7 +10,7 @@
 
 .tox:not(.tox-tinymce-inline) {
   .tox-editor-header {
-    border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
     padding: 0 !important;
   }
@@ -21,7 +21,7 @@
 }
 
 .tox-statusbar {
-  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
 }
 
 .tox .tox-toolbar,