diff --git a/_config.yml b/_config.yml
index 4f930918aae3939b7058058a583394661437a8b5..a4fbb15c12df1cf268e45a0dbde7be6d46a8db9f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -131,7 +131,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary
diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml
index bfc5aca709fd6532f02cf878c492ccd508e5851a..6df0cdc8c1c5b3a52b6299934d3c68dc01f90304 100644
--- a/src/pages/_data/docs.yml
+++ b/src/pages/_data/docs.yml
@@ -105,6 +105,10 @@ utils:
   title: Utilities
   icon: flame
   children:
+    borders:
+      title: Borders
+      url: docs/borders.html
+
     cursors:
       title: Cursors
       url: docs/cursors.html
diff --git a/src/pages/_docs/borders.md b/src/pages/_docs/borders.md
new file mode 100644
index 0000000000000000000000000000000000000000..4e44920bd603f39c9daf7e650f16ec9c56c08f7c
--- /dev/null
+++ b/src/pages/_docs/borders.md
@@ -0,0 +1,70 @@
+---
+title: Borders
+---
+
+## Border direction
+
+The following border utilities classes will add border to any side of an element.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-top"></div>
+<div class="w-5 h-5 bg-light border-end"></div>
+<div class="w-5 h-5 bg-light border-bottom"></div>
+<div class="w-5 h-5 bg-light border-start"></div>
+<div class="w-5 h-5 bg-light border-x"></div>
+<div class="w-5 h-5 bg-light border-y"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border size
+
+Below are the available border size utilities classes.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border-0"></div>
+<div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-wide"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+
+## Remove border
+
+You can remove a border on a single side of an element by using the following border utilities classes.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border border-top-0"></div>
+<div class="w-5 h-5 bg-light border border-end-0"></div>
+<div class="w-5 h-5 bg-light border border-bottom-0"></div>
+<div class="w-5 h-5 bg-light border border-start-0"></div>
+<div class="w-5 h-5 bg-light border border-x-0"></div>
+<div class="w-5 h-5 bg-light border border-y-0"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border color
+
+You can set a border color of any side of an element by adding the following utilities classes below.
+
+{% capture code %}
+{% for color in site.theme-colors %}
+<div class="w-5 h-5 bg-light border border-{{ color[1].class }}"></div>
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
+
+
+## Border radius
+
+You can set a border to any element by using the following utilities classes below.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border rounded-0"></div>
+<div class="w-5 h-5 bg-light border rounded"></div>
+<div class="w-5 h-5 bg-light border rounded-1"></div>
+<div class="w-5 h-5 bg-light border rounded-2"></div>
+<div class="w-5 h-5 bg-light border rounded-3"></div>
+<div class="w-5 h-5 bg-light border rounded-circle"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
\ No newline at end of file
diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md
index 2046bd7b1efe43fad2676fcf8f4cd99e4a63a8e1..1b6721ab133f218009ec60bfd231ae1aabc91529 100644
--- a/src/pages/_docs/buttons.md
+++ b/src/pages/_docs/buttons.md
@@ -34,7 +34,7 @@ The standard button creates a white background and subtle hover animation. It's
 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title %}
@@ -48,7 +48,7 @@ Use the button classes that correspond to the function of your button. The big r
 Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form. 
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title disabled=true %}
@@ -74,7 +74,7 @@ Choose the right color for your button to make it go well with your design and d
 Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action. 
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 <a href="#" class="btn btn-ghost-{{ button[0] }}">{{ button[1].title }}</a>
 {% endfor %}
 {% endcapture %}
diff --git a/src/pages/_includes/layout/debug.html b/src/pages/_includes/layout/debug.html
index 875964fb18c44bea7e8cb707f25d9941c9932f00..274a399cca3b813175f64c61bf2b33888e0a5434 100644
--- a/src/pages/_includes/layout/debug.html
+++ b/src/pages/_includes/layout/debug.html
@@ -59,7 +59,7 @@
 		height: 6px;
 		display: inline-block;
 		background: rgba(255, 255, 255, .3);
-		border-radius: $border-radius-full;
+		border-radius: $border-radius-pill;
 	}
 
 	body.show-debug-code .card-debug {
diff --git a/src/pages/_includes/parts/buttons-table.html b/src/pages/_includes/parts/buttons-table.html
index d138dfb6918c35d6fb822cdddb35a4ce4337b9ca..de70c3929b23c93e879f462b2083f036b7eaa574 100644
--- a/src/pages/_includes/parts/buttons-table.html
+++ b/src/pages/_includes/parts/buttons-table.html
@@ -2,7 +2,7 @@
 {% assign show-link = include.show-link | default: false %}
 {% assign show-states = include.show-states | default: false %}
 {% assign hide-labels = include.hide-labels | default: false %}
-{% assign variants = include.variants | default: site.button-variants %}
+{% assign variants = include.variants | default: site.theme-colors %}
 
 {% for state in site.button-states %}
    {% if show-states or (state.class != 'active' and state.class != 'disabled') %}
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 118f017a8facf8fa9d0d4880b2430d9c553ff1fa..be75a96b828ba2f751658ccbc2d4146b09f42a71 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,4 +1,9 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+$border-values: (
+  null: $border-width solid $border-color-transparent,
+  wide: $border-width-wide solid $border-color-transparent,
+  0: 0,
+);
 
 //Utilities
 $utilities: (
@@ -57,43 +62,35 @@ $utilities: (
   ),
   "border": (
     property: border,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-top": (
     property: border-top,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-end": (
+    class: border-end,
     property: border-right,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-bottom": (
     property: border-bottom,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-start": (
+    class: border-start,
     property: border-left,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
+  ),
+  "border-x": (
+    class: border-x,
+    property: border-left border-right,
+    values: $border-values
+  ),
+  "border-y": (
+    class: border-y,
+    property: border-top border-bottom,
+    values: $border-values
   ),
   "width": (
     property: width,
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e94199d067ccd07b6c499a2ede47a88b0039783d..3f4f85ced7dc4ef78b7cb259b316e60e991a6911 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -189,8 +189,11 @@ $dark-mode-text: $light;
 // Borders
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
-$border-radius: 3px !default;
-$border-radius-full: 50% !default;
+
+$border-radius-sm: 2px !default;
+$border-radius: 4px !default;
+$border-radius-lg: 8px !default;
+$border-radius-pill: 50% !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
@@ -238,14 +241,13 @@ $size-spacers: (
 ) !default;
 
 
-$size-values: (
-  1: 1%,
+$size-values: map-merge($spacers, (
   25: 25%,
   50: 50%,
   75: 75%,
   100: 100%,
   auto: auto
-) !default;
+)) !default;
 
 
 $container-variations: (
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index e738de1801d9b3dce7b5c194746e88b4cd09d4c8..3da303c6aa6f8fbc43b05c34053530ba6799c80a 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -25,7 +25,7 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     box-shadow: 0 0 0 2px $white;
   }
 
@@ -35,7 +35,7 @@
 }
 
 .avatar-rounded {
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 }
 
 @each $avatar-size, $size in $avatar-sizes {
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 12f758ea82acdee9aa54af304451f1c00be7c43a..1814062166028bae515e987742b660e125f67d8d 100644
--- a/src/scss/ui/_badges.scss
+++ b/src/scss/ui/_badges.scss
@@ -21,7 +21,7 @@
     min-width: 0;
     min-height: auto;
     padding: 0;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
   }
 
   .avatar {
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index 0783a78a58868e075def3b8a0d0aef78f5c9d5ff..83f70cad7370580225b7d388cc2d713b6ef0521a 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -157,7 +157,7 @@
   z-index: $zindex-fixed;
   bottom: 1.5rem;
   right: 1.5rem;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 }
 
 .btn-loading {
@@ -172,7 +172,7 @@
     vertical-align: text-bottom;
     border: $spinner-border-width-sm solid currentColor;
     border-right-color: transparent;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     color: $white;
     position: absolute;
     width: 1rem;
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 4ffcd6c93469eb6e42ee88a748e29fd3d4058d4e..ffeae3766cdfb90f184c561f5af2aeb02f5de51d 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -53,7 +53,7 @@
     cursor: pointer;
     background: 0 0;
     border: 1px solid transparent;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     outline: 0;
     transition: background .3s, border .3s, box-shadow .32s, color .3s;
 
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index d697127d6a1cc613fc6ef081a26ef095bb11fe46..06526854168ba7883846e9ba6b0051a0294673b4 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -152,7 +152,7 @@ Form help
   cursor: pointer;
   user-select: none;
   background: $min-white;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
   transition: .3s background-color, .3s color;
 
   &:hover,
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index 68facca723a31bb5a32431d51ee6af9e0a1ee9ab..38e9bad1f08ad1da61ecdc612f5e1b99bcb7079b 100644
--- a/src/scss/ui/_lists.scss
+++ b/src/scss/ui/_lists.scss
@@ -77,7 +77,7 @@
   color: $white;
   text-align: center;
   background: $text-muted;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 
   .icon {
     width: 1rem;
diff --git a/src/scss/ui/_loaders.scss b/src/scss/ui/_loaders.scss
index 5943c8b7fd192e599264caa5aa61cb452a33bd98..488f0a65f586d48d8312ed47918c6e32ad050484 100644
--- a/src/scss/ui/_loaders.scss
+++ b/src/scss/ui/_loaders.scss
@@ -28,7 +28,7 @@
     border-top-color: currentColor;
     border-left-color: currentColor;
 
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     animation: loader .6s linear;
     animation-iteration-count: infinite;
   }
diff --git a/src/scss/ui/_skeleton.scss b/src/scss/ui/_skeleton.scss
index ed77ee1d187591c3a55cf132da036dd9f269e1f7..82466e7b0b1556e08ac4e534afb1f20b00bc4bc5 100644
--- a/src/scss/ui/_skeleton.scss
+++ b/src/scss/ui/_skeleton.scss
@@ -20,7 +20,7 @@
   vertical-align: bottom;
   width: $avatar-size;
   height: $avatar-size;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 
   @each $name, $size in $avatar-sizes {
     &-#{$name} {
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index 2f9850954508087fcef12d68f4394675e6fff0ab..00b02ec3a71dc49253c42ffecf3bdbc3ab23d600 100644
--- a/src/scss/ui/_steps.scss
+++ b/src/scss/ui/_steps.scss
@@ -82,7 +82,7 @@
     display: block;
     content: "";
     border: 2px solid $white;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     transform: translateX(-50%);
   }