Hire UsGet CoreUI PRO all-access →

Bootstrap 6 Border

Border

MarkdownChatGPTClaude

Use border utilities to add or remove an element's borders, and to set how thick they are.

ClassStyles
.borderborder: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color);
.border-0border: 0;
.border-xborder-inline: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color);
.border-x-0border-inline: 0;
.border-yborder-block: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color);
.border-y-0border-block: 0;
.border-keylineborder-width: var(--cui-border-width-keyline);
.border-1border-width: var(--cui-border-width-1);
.border-2border-width: var(--cui-border-width-2);
.border-3border-width: var(--cui-border-width-3);
.border-4border-width: var(--cui-border-width-4);
.border-5border-width: var(--cui-border-width-5);
.border-top-keylineborder-top-width: var(--cui-border-width-keyline);
.border-top-1border-top-width: var(--cui-border-width-1);
.border-top-2border-top-width: var(--cui-border-width-2);
.border-top-3border-top-width: var(--cui-border-width-3);
.border-top-4border-top-width: var(--cui-border-width-4);
.border-top-5border-top-width: var(--cui-border-width-5);
.border-end-keylineborder-inline-end-width: var(--cui-border-width-keyline);
.border-end-1border-inline-end-width: var(--cui-border-width-1);
.border-end-2border-inline-end-width: var(--cui-border-width-2);
.border-end-3border-inline-end-width: var(--cui-border-width-3);
.border-end-4border-inline-end-width: var(--cui-border-width-4);
.border-end-5border-inline-end-width: var(--cui-border-width-5);
.border-bottom-keylineborder-bottom-width: var(--cui-border-width-keyline);
.border-bottom-1border-bottom-width: var(--cui-border-width-1);
.border-bottom-2border-bottom-width: var(--cui-border-width-2);
.border-bottom-3border-bottom-width: var(--cui-border-width-3);
.border-bottom-4border-bottom-width: var(--cui-border-width-4);
.border-bottom-5border-bottom-width: var(--cui-border-width-5);
.border-start-keylineborder-inline-start-width: var(--cui-border-width-keyline);
.border-start-1border-inline-start-width: var(--cui-border-width-1);
.border-start-2border-inline-start-width: var(--cui-border-width-2);
.border-start-3border-inline-start-width: var(--cui-border-width-3);
.border-start-4border-inline-start-width: var(--cui-border-width-4);
.border-start-5border-inline-start-width: var(--cui-border-width-5);
On this page

Additive

Use border utilities to add or remove an element’s borders. Choose from all borders, one at a time, or a facing pair — .border-x draws the two inline sides, .border-y the two block sides.

html
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
<span class="border-x"></span>
<span class="border-y"></span>
Added in v6.0.0

.border-x and .border-y set the border-inline and border-block shorthands, so they follow the writing direction the way the single-side classes do.

Subtractive

Or remove borders:

html
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<span class="border border-x-0"></span>
<span class="border border-y-0"></span>

Width

Added in v6.0.0

.border-keyline sits below 1px, for a hairline that stays hairline on a high-density screen instead of thickening to a full device pixel.

The widths are a scale on --cui-border-width: .border-1 is the base, .border-keyline half of it, .border-2 … .border-5 its multiples, computed in the browser. :root { --cui-border-width: 2px } re-weights every width class and every component border at once.

html
<span class="border border-keyline"></span>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

<span class="border border-1 border-info"></span>
<span class="border border-2 border-info"></span>
<span class="border border-3 border-info"></span>
<span class="border border-4 border-info"></span>
<span class="border border-5 border-info"></span>

<span class="border-start border-start-keyline"></span>
<span class="border-start border-start-1"></span>
<span class="border-start border-start-2"></span>
<span class="border-start border-start-3"></span>
<span class="border-start border-start-4"></span>
<span class="border-start border-start-5"></span>

<span class="border-start border-start-1 border-start-info"></span>
<span class="border-start border-start-2 border-start-info"></span>
<span class="border-start border-start-3 border-start-info"></span>
<span class="border-start border-start-4 border-start-info"></span>
<span class="border-start border-start-5 border-start-info"></span>

Customizing

CSS variables

scss
--cui-border-width: 1px,
--cui-border-style: solid,
--cui-border-color: light-dark(var(--cui-gray-200), var(--cui-gray-700)),
--cui-border-color-translucent: color-mix(in oklch, var(--cui-fg-body) 15%, transparent),

Each stop of the width scale is one token, --cui-border-width-{key}, a calc() multiple of --cui-border-width; the .border-{key} classes read the stops, so overriding one stop re-weights every class on it:

scss
@each $key, $value in $border-widths {
  $root-token-defaults: map.set($root-token-defaults, --cui-border-width-#{$key}, $value);
}

Sass maps

Each neutral border is one entry: the key is one .border-{key} utility and the --cui-border-{key} token behind it, in light and dark mode. --cui-border-color, the default every component reads, is a separate knob above:

scss
$theme-borders: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-borders: defaults(
  (
    "bg":          var(--cui-bg-body),
    "body":        light-dark(var(--cui-gray-300), var(--cui-gray-800)),
    "muted":       light-dark(var(--cui-gray-200), var(--cui-gray-800)),
    "subtle":      light-dark(color-mix(in oklch, var(--cui-gray-100), var(--cui-gray-200)), color-mix(in oklch, var(--cui-gray-800), var(--cui-gray-900))),
    "emphasized":  light-dark(var(--cui-gray-400), var(--cui-gray-600)),
    "white":       var(--cui-white),
    "black":       var(--cui-black),
  ),
  $theme-borders
);

Each entry is one .border-{width} class and the --cui-border-width-{width} token it reads. Add a key to define a width (6: calc(var(--cui-border-width) * 6)), or set one to null to drop it:

scss
$border-widths: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$border-widths: defaults(
  (
    keyline: calc(var(--cui-border-width) * .5),
    1: var(--cui-border-width),
    2: calc(var(--cui-border-width) * 2),
    3: calc(var(--cui-border-width) * 3),
    4: calc(var(--cui-border-width) * 4),
    5: calc(var(--cui-border-width) * 5)
  ),
  $border-widths
);

Utilities API

Border utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss
"border": (
  property: border,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  ),
),
"border-top": (
  property: border-top,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  )
),
"border-end": (
  property: border-inline-end,
  class: border-end,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  ),
),
"border-bottom": (
  property: border-bottom,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  )
),
"border-start": (
  property: border-inline-start,
  class: border-start,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  ),
),
"border-x": (
  property: border-inline,
  class: border-x,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  ),
),
"border-y": (
  property: border-block,
  class: border-y,
  values: (
    null: var(--cui-border-width) var(--cui-border-style) var(--cui-border-color),
    0: 0,
  ),
),
scss
"border-width": (
  property: border-width,
  class: border,
  values: $utilities-border-widths
),
"border-top-width": (
  property: border-top-width,
  class: border-top,
  values: $utilities-border-widths
),
"border-end-width": (
  property: border-inline-end-width,
  class: border-end,
  values: $utilities-border-widths,
),
"border-bottom-width": (
  property: border-bottom-width,
  class: border-bottom,
  values: $utilities-border-widths
),
"border-start-width": (
  property: border-inline-start-width,
  class: border-start,
  values: $utilities-border-widths,
),