Borders

A basic set of utility classes for including borders on elements. Border styles, widths and colors can be customized inline using CSS variables provided for property values. Disabled by default, enable with $enable-borders: true; in the configuration.scss document.

Default borders (anchor)

There's currently no responsive modifiers for border utilities.

.bd

.bd-t

.bd-b

.bd-y

.bd-l

.bd-r

.bd-x

Example HTML

<div class="bd p-3">.bd</div>
<div class="bd-t p-3">.bd-t</div>
<div class="bd-b p-3">.bd-b</div>
<div class="bd-y p-3">.bd-y</div>
<div class="bd-l p-3">.bd-l</div>
<div class="bd-r p-3">.bd-r</div>
<div class="bd-x p-3">.bd-x</div>

Border radius (anchor)

.bd .radius-xs

.bd .radius-sm

.bd .radius-md

.bd .radius-lg

Example HTML

<div class="bd radius-xs p-3">.bd .radius-xs</div>
<div class="bd radius-sm p-3">.bd .radius-sm</div>
<div class="bd radius-md p-3">.bd .radius-md</div>
<div class="bd radius-lg p-3">.bd .radius-lg</div>

Colors (anchor)

With $enable-primary-colors: true;

.bd .bd-blue

.bd .bd-red

.bd .bd-green

.bd .bd-orange

.bd .bd-cyan

Example HTML

<div class="bd bd-blue p-3">.bd .bd-blue</div>
<div class="bd bd-red p-3">.bd .bd-red</div>
<div class="bd bd-green p-3">.bd .bd-green</div>
<div class="bd bd-orange p-3">.bd .bd-orange</div>
<div class="bd bd-cyan p-3">.bd .bd-cyan</div>

Customize (anchor)

The borders utilities are compiled from the _borders.scss document within the [styles/utilities] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@if $enable-borders {

.bd, .bd-t, .bd-b, .bd-l, .bd-r, .bd-y, .bd-x, .bd-child * {
  --bd-size: 1px;
  --bd-style: solid;
  --bd-color: var(--surf-3);
}

.bd {
  border: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-t {
  border-block-start: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-b {
  border-block-end: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-y {
  border-block: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-x {
  border-inline: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-l {
  border-inline-start: var(--bd-size) var(--bd-style) var(--bd-color);
}

.bd-r {
  border-inline-end: var(--bd-size) var(--bd-style) var(--bd-color);
}


.bd-child * {
  border: var(--bd-size) var(--bd-style) var(--bd-color);
}

.radius-xs, .radius-sm, .radius-md, .radius-lg, .radius-xl, .radius-circle {
  border-radius: var(--bd-radius);
}

.radius-xs {
  --bd-radius: .125em;
}

.radius-sm {
  --bd-radius: .25rem;
}

.radius-md {
  --bd-radius: .5rem;
}

.radius-lg {
  --bd-radius: .75rem;
}

.radius-xl {
  --bd-radius: 1rem;
}

.radius-circle {
  --bd-radius: 50%;
}

@if $enable-primary-colors {
  .bd-blue {
    --bd-color: var(--blue);
  }
  
  .bd-red {
    --bd-color: var(--red);
  }
  
  .bd-green {
    --bd-color: var(--green);
  }
  
  .bd-orange {
    --bd-color: var(--orange);
  } 
  
  .bd-cyan {
    --bd-color: var(--cyan);
  } 
} // END [if/primary-colors]

} // END [if/borders]