Border

• Base classes
• Border width
• Border style
• Border color
• Border opacity
• Border gradient

Base classes #

Border 'base' utility classes:

If you don't specify any border width, style, and color, the border 'base' classes apply a 1px solid border using var(--color-contrast-higher) as color, with a 10% opacity.

Border width #

Modify the border width using one of the following classes:

Example:

<div class="border-top border-3"></div>

Border style #

Modify the border style using one of the following classes:

Example:

<div class="border-bottom border-2 border-dashed"></div>

Border color #

Modify the border color using one of the following classes.

Border color contrasts #

Border primary #

Border accent #

Border feedback colors #

Border black & white #

Border background color #

Border opacity #

The base border classes apply a default var(--color-contrast-higher) border color with 10% opacity. Optionally, you can edit the 'base' opacity color updating the --border-opacity-base custom property:

:root {
  --border-opacity-base: 0.1; /* set the base border opacity equal to 10% */
}

If you want to use the same border style on a component level in CSS:

.component {
  border: 1px solid alpha(var(--color-contrast-higher), var(--border-opacity-base));
}

Alternatively, you can combine a border color class with one of the following border opacity classes:

Example:

<div class="border border-primary border-opacity-70%"> <!-- content --> </div> 

Border gradient #

If you've added a gradient to your color palette (e.g., gradient 'primary'), you can use the following classes:

<div class="border border-4 border-gradient-primary-right radius-md"></div>