Border color

Class	Styles
.border-primary	--bs-border-color: var(--bs-blue-500); border-color: var(--bs-border-color);
.border-accent	--bs-border-color: var(--bs-indigo-500); border-color: var(--bs-border-color);
.border-success	--bs-border-color: var(--bs-green-500); border-color: var(--bs-border-color);
.border-danger	--bs-border-color: var(--bs-red-500); border-color: var(--bs-border-color);
.border-warning	--bs-border-color: var(--bs-yellow-500); border-color: var(--bs-border-color);
.border-info	--bs-border-color: var(--bs-cyan-500); border-color: var(--bs-border-color);
.border-inverse	--bs-border-color: light-dark(var(--bs-gray-900), var(--bs-gray-025)); border-color: var(--bs-border-color);
.border-secondary	--bs-border-color: light-dark(var(--bs-gray-100), var(--bs-gray-600)); border-color: var(--bs-border-color);
.border-bg	--bs-border-color: var(--bs-bg-body); border-color: var(--bs-border-color);
.border-body	--bs-border-color: light-dark(var(--bs-gray-300), var(--bs-gray-800)); border-color: var(--bs-border-color);
.border-muted	--bs-border-color: light-dark(var(--bs-gray-200), var(--bs-gray-800)); border-color: var(--bs-border-color);
.border-subtle	--bs-border-color: light-dark(var(--bs-gray-100), var(--bs-gray-900)); border-color: var(--bs-border-color);
.border-emphasized	--bs-border-color: light-dark(var(--bs-gray-400), var(--bs-gray-600)); border-color: var(--bs-border-color);
.border-white	--bs-border-color: var(--bs-white); border-color: var(--bs-border-color);
.border-black	--bs-border-color: var(--bs-black); border-color: var(--bs-border-color);
.border-subtle-primary	--bs-border-color: light-dark(var(--bs-blue-300), var(--bs-blue-600)); border-color: var(--bs-border-color);
.border-subtle-accent	--bs-border-color: light-dark(var(--bs-indigo-300), var(--bs-indigo-600)); border-color: var(--bs-border-color);
.border-subtle-success	--bs-border-color: light-dark(var(--bs-green-300), var(--bs-green-600)); border-color: var(--bs-border-color);
.border-subtle-danger	--bs-border-color: light-dark(var(--bs-red-300), var(--bs-red-600)); border-color: var(--bs-border-color);
.border-subtle-warning	--bs-border-color: light-dark(var(--bs-yellow-300), var(--bs-yellow-600)); border-color: var(--bs-border-color);
.border-subtle-info	--bs-border-color: light-dark(var(--bs-cyan-300), var(--bs-cyan-600)); border-color: var(--bs-border-color);
.border-subtle-inverse	--bs-border-color: light-dark(var(--bs-gray-400), var(--bs-gray-100)); border-color: var(--bs-border-color);
.border-subtle-secondary	--bs-border-color: light-dark(var(--bs-gray-300), var(--bs-gray-600)); border-color: var(--bs-border-color);
.border-10	border-color: color-mix(in oklch, var(--bs-border-color) 10%, transparent);
.border-20	border-color: color-mix(in oklch, var(--bs-border-color) 20%, transparent);
.border-30	border-color: color-mix(in oklch, var(--bs-border-color) 30%, transparent);
.border-40	border-color: color-mix(in oklch, var(--bs-border-color) 40%, transparent);
.border-50	border-color: color-mix(in oklch, var(--bs-border-color) 50%, transparent);
.border-60	border-color: color-mix(in oklch, var(--bs-border-color) 60%, transparent);
.border-70	border-color: color-mix(in oklch, var(--bs-border-color) 70%, transparent);
.border-80	border-color: color-mix(in oklch, var(--bs-border-color) 80%, transparent);
.border-90	border-color: color-mix(in oklch, var(--bs-border-color) 90%, transparent);
.border-100	border-color: var(--bs-border-color);

Colors

Change the border-color using utilities built on our theme colors using .border-{color} and .border-subtle-{color}. All these border color utilities set the border-color property to a local CSS variable, --bs-border-color, which has the value of the theme color. Color values also use light-dark() to ensure sufficient contrast in both light and dark color modes.

For example, .border-primary sets the --bs-border-color variable to var(--bs-blue-500):

CSS

.border-primary {
  --bs-border-color: var(--bs-blue-500);
  border-color: var(--bs-border-color);
}

This approach allows us to also easily support translucency with our .border-{opacity} utilities as we can use color-mix() with the CSS variable to generate the appropriate color. See the opacity section for more details.

primary primary subtle accent accent subtle success success subtle danger danger subtle warning warning subtle info info subtle inverse inverse subtle secondary secondary subtle bg body muted subtle emphasized black white

HTML

<span class="border border-5 border-primary">primary</span>
<span class="border border-5 border-subtle-primary">primary subtle</span>
<span class="border border-5 border-accent">accent</span>
<span class="border border-5 border-subtle-accent">accent subtle</span>
<span class="border border-5 border-success">success</span>
<span class="border border-5 border-subtle-success">success subtle</span>
<span class="border border-5 border-danger">danger</span>
<span class="border border-5 border-subtle-danger">danger subtle</span>
<span class="border border-5 border-warning">warning</span>
<span class="border border-5 border-subtle-warning">warning subtle</span>
<span class="border border-5 border-info">info</span>
<span class="border border-5 border-subtle-info">info subtle</span>
<span class="border border-5 border-inverse">inverse</span>
<span class="border border-5 border-subtle-inverse">inverse subtle</span>
<span class="border border-5 border-secondary">secondary</span>
<span class="border border-5 border-subtle-secondary">secondary subtle</span>
<span class="border border-5 border-bg">bg</span>
<span class="border border-5 border-body">body</span>
<span class="border border-5 border-muted">muted</span>
<span class="border border-5 border-subtle">subtle</span>
<span class="border border-5 border-emphasized">emphasized</span>
<span class="border border-5 border-black">black</span>
<span class="border border-5 border-white">white</span>

Or modify the default border-color of a component:

Email address

Dangerous heading

Changing border color and width

HTML

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

Opacity

Change the opacity of a border color by using any of the .border-<percentage> utilities which use color-mix() to mix the border color with transparent thanks to the CSS variable approach mentioned above.

Default border

90% opacity

80% opacity

70% opacity

60% opacity

50% opacity

40% opacity

30% opacity

20% opacity

10% opacity

HTML

<div class="border border-5 border-primary p-2 mb-2">Default border</div>
<div class="border border-5 border-primary border-90 p-2 mb-2">90% opacity</div>
<div class="border border-5 border-primary border-80 p-2 mb-2">80% opacity</div>
<div class="border border-5 border-primary border-70 p-2 mb-2">70% opacity</div>
<div class="border border-5 border-primary border-60 p-2 mb-2">60% opacity</div>
<div class="border border-5 border-primary border-50 p-2 mb-2">50% opacity</div>
<div class="border border-5 border-primary border-40 p-2 mb-2">40% opacity</div>
<div class="border border-5 border-primary border-30 p-2 mb-2">30% opacity</div>
<div class="border border-5 border-primary border-20 p-2 mb-2">20% opacity</div>
<div class="border border-5 border-primary border-10 p-2">10% opacity</div>

CSS

Variables

SCSS

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

Sass variables

Variables for setting border-color in .border-*-subtle utilities in light and dark mode:

Sass utilities API

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

SCSS

"border-color": (
  property: (
    "--border-color": null,
    "border-color": var(--border-color)
  ),
  class: border,
  values: map.merge(theme-color-values("bg"), $theme-borders),
),
"border-color-subtle": (
  property: (
    "--border-color": null,
    "border-color": var(--border-color)
  ),
  class: border-subtle,
  values: theme-color-values("border"),
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths
),
"border-opacity": (
  class: border,
  property: border-color,
  values: theme-opacity-values(--border-color)
),