Border

Class	Styles
.border	border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-0	border: 0;
.border-top	border-block-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-top-0	border-block-start: 0;
.border-end	border-inline-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-end-0	border-inline-end: 0;
.border-bottom	border-block-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-bottom-0	border-block-end: 0;
.border-start	border-inline-start: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
.border-start-0	border-inline-start: 0;
.border-1	border-width: 1px;
.border-2	border-width: 2px;
.border-3	border-width: 3px;
.border-4	border-width: 4px;
.border-5	border-width: 5px;

Border

Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.

Additive

Add borders to custom elements:

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>

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>

Width

HTML

<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>

CSS

Variables

SCSS

--border-width: #{$border-width};
--border-style: #{$border-style};
--border-color: #{$border-color};
--border-color-translucent: #{$border-color-translucent};

Sass variables

SCSS

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);
$border-style:                solid;
$border-color:                color-mix(in oklch, var(--gray-100), var(--gray-200));
$border-color-translucent:    rgba($black, .175);

Sass mixins

SCSS

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-end-start-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
  }
}

Sass 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(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-top": (
  class: border-top,
  property: border-block-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-end": (
  property: border-inline-end,
  class: border-end,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-bottom": (
  property: border-block-end,
  class: border-bottom,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-start": (
  property: border-inline-start,
  class: border-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-y": (
  property: border-block,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-x": (
  property: border-inline,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),