Use the border utility classes to control the border size and color properties.
The border utility class sets the border-color and border-size, with support for the following sizes: 0, 1px, or 2px.
Border Variations
Format: .ds-u-border-[x|y|bottom|left|right|top]--[SIZE]
All Borders
.ds-u-border--0.ds-u-border--1.ds-u-border--2<div class="ds-u-display--flex">
<div
class="ds-u-border--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border--0</code>
</div>
<div
class="ds-u-border--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border--1</code>
</div>
<div
class="ds-u-border--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border--2</code>
</div>
</div>
Horizontal Borders
.ds-u-border-x--0.ds-u-border-x--1.ds-u-border-x--2<div class="ds-u-display--flex">
<div
class="ds-u-border-x--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-x--0</code>
</div>
<div
class="ds-u-border-x--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-x--1</code>
</div>
<div
class="ds-u-border-x--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-x--2</code>
</div>
</div>
Vertical Borders
.ds-u-border-y--0.ds-u-borde-y--1.ds-u-border-y--2<div class="ds-u-display--flex">
<div
class="ds-u-border-y--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-y--0</code>
</div>
<div
class="ds-u-border-y--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-borde-y--1</code>
</div>
<div
class="ds-u-border-y--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-y--2</code>
</div>
</div>
Bottom Border
.ds-u-border-bottom--0.ds-u-border-bottom--1.ds-u-border-bottom--2<div class="ds-u-display--flex">
<div
class="ds-u-border-bottom--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-bottom--0</code>
</div>
<div
class="ds-u-border-bottom--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-bottom--1</code>
</div>
<div
class="ds-u-border-bottom--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-bottom--2</code>
</div>
</div>
Left Border
.ds-u-border-left--0.ds-u-border-left--1.ds-u-border-left--2<div class="ds-u-display--flex">
<div
class="ds-u-border-left--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-left--0</code>
</div>
<div
class="ds-u-border-left--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-left--1</code>
</div>
<div
class="ds-u-border-left--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-left--2</code>
</div>
</div>
Right Border
.ds-u-border-right--0.ds-u-border-right--1.ds-u-border-right--2<div class="ds-u-display--flex">
<div
class="ds-u-border-right--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-right--0</code>
</div>
<div
class="ds-u-border-right--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-right--1</code>
</div>
<div
class="ds-u-border-right--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-right--2</code>
</div>
</div>
Top Border
.ds-u-border-top--0.ds-u-border-top--1.ds-u-border-top--2<div class="ds-u-display--flex">
<div
class="ds-u-border-top--0 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-top--0</code>
</div>
<div
class="ds-u-border-top--1 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-top--1</code>
</div>
<div
class="ds-u-border-top--2 ds-u-margin-right--2 ds-u-border--dark"
style="max-width: fit-content"
>
<code>.ds-u-border-top--2</code>
</div>
</div>
Border color
Format: .ds-u-border--[COLOR NAME]
Default Borders
.ds-u-border.ds-u-border--dark.ds-u-border--inverse<div class="ds-u-display--flex ds-u-align-items--center">
<div class="ds-u-border ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border</code>
</div>
<div class="ds-u-border--dark ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--dark</code>
</div>
<div class="ds-u-fill--primary-darkest ds-u-padding--1">
<div class="ds-u-border--inverse ds-u-border--2">
<code>.ds-u-border--inverse</code>
</div>
</div>
</div>
Error Borders
.ds-u-border--error.ds-u-border--error-light.ds-u-border--error-lighter<div class="ds-u-display--flex ds-u-align-items--center">
<div class="ds-u-border--error ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--error</code>
</div>
<div class="ds-u-border--error-light ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--error-light</code>
</div>
<div class="ds-u-fill--primary-darkest ds-u-padding--1">
<div class="ds-u-border--error-lighter ds-u-border--2">
<code>.ds-u-border--error-lighter</code>
</div>
</div>
</div>
Warn Borders
.ds-u-border--warn.ds-u-border--warn-light.ds-u-border--warn-lighter<div class="ds-u-display--flex ds-u-align-items--center">
<div class="ds-u-border--warn ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--warn</code>
</div>
<div class="ds-u-border--warn-light ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--warn-light</code>
</div>
<div class="ds-u-fill--primary-darkest ds-u-padding--1">
<div class="ds-u-border--warn-lighter ds-u-border--2">
<code>.ds-u-border--warn-lighter</code>
</div>
</div>
</div>
Success Borders
.ds-u-border--success.ds-u-border--success-light.ds-u-border--success-lighter<div class="ds-u-display--flex ds-u-align-items--center">
<div class="ds-u-border--success ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--success</code>
</div>
<div class="ds-u-border--success-light ds-u-margin-right--2 ds-u-border--2">
<code>.ds-u-border--success-light</code>
</div>
<div class="ds-u-fill--primary-darkest ds-u-padding--1">
<div class="ds-u-border--success-lighter ds-u-border--2">
<code>.ds-u-border--success-lighter</code>
</div>
</div>
</div>
Guidance
Customization
The following CSS variables can be overridden to theme the border utility:
--color-border--color-border-dark--color-border-inverse