Bootstrap 6 Border Color

Border color

Change the border color of an element with utilities built on our theme colors, and fade it with the opacity utilities.

Class	Styles
.border-primary	--cui-border: var(--cui-primary-bg); border-color: var(--cui-border);
.border-secondary	--cui-border: var(--cui-secondary-bg); border-color: var(--cui-border);
.border-success	--cui-border: var(--cui-success-bg); border-color: var(--cui-border);
.border-info	--cui-border: var(--cui-info-bg); border-color: var(--cui-border);
.border-warning	--cui-border: var(--cui-warning-bg); border-color: var(--cui-border);
.border-danger	--cui-border: var(--cui-danger-bg); border-color: var(--cui-border);
.border-inverse	--cui-border: var(--cui-inverse-bg); border-color: var(--cui-border);
.border-bg	--cui-border: var(--cui-border-bg); border-color: var(--cui-border);
.border-body	--cui-border: var(--cui-border-body); border-color: var(--cui-border);
.border-muted	--cui-border: var(--cui-border-muted); border-color: var(--cui-border);
.border-subtle	--cui-border: var(--cui-border-subtle); border-color: var(--cui-border);
.border-emphasized	--cui-border: var(--cui-border-emphasized); border-color: var(--cui-border);
.border-white	--cui-border: var(--cui-border-white); border-color: var(--cui-border);
.border-black	--cui-border: var(--cui-border-black); border-color: var(--cui-border);
.border-subtle-primary	--cui-border: var(--cui-primary-border); border-color: var(--cui-border);
.border-subtle-secondary	--cui-border: var(--cui-secondary-border); border-color: var(--cui-border);
.border-subtle-success	--cui-border: var(--cui-success-border); border-color: var(--cui-border);
.border-subtle-info	--cui-border: var(--cui-info-border); border-color: var(--cui-border);
.border-subtle-warning	--cui-border: var(--cui-warning-border); border-color: var(--cui-border);
.border-subtle-danger	--cui-border: var(--cui-danger-border); border-color: var(--cui-border);
.border-subtle-inverse	--cui-border: var(--cui-inverse-border); border-color: var(--cui-border);
.border-10	border-color: color-mix(in oklch, var(--cui-border) 10%, transparent);
.border-20	border-color: color-mix(in oklch, var(--cui-border) 20%, transparent);
.border-30	border-color: color-mix(in oklch, var(--cui-border) 30%, transparent);
.border-40	border-color: color-mix(in oklch, var(--cui-border) 40%, transparent);
.border-50	border-color: color-mix(in oklch, var(--cui-border) 50%, transparent);
.border-60	border-color: color-mix(in oklch, var(--cui-border) 60%, transparent);
.border-70	border-color: color-mix(in oklch, var(--cui-border) 70%, transparent);
.border-80	border-color: color-mix(in oklch, var(--cui-border) 80%, transparent);
.border-90	border-color: color-mix(in oklch, var(--cui-border) 90%, transparent);
.border-100	border-color: var(--cui-border);
.border-primary-subtle	--cui-border: var(--cui-primary-border); border-color: var(--cui-border);
.border-secondary-subtle	--cui-border: var(--cui-secondary-border); border-color: var(--cui-border);
.border-success-subtle	--cui-border: var(--cui-success-border); border-color: var(--cui-border);
.border-info-subtle	--cui-border: var(--cui-info-border); border-color: var(--cui-border);
.border-warning-subtle	--cui-border: var(--cui-warning-border); border-color: var(--cui-border);
.border-danger-subtle	--cui-border: var(--cui-danger-border); border-color: var(--cui-border);
.border-inverse-subtle	--cui-border: var(--cui-inverse-border); border-color: var(--cui-border);
.border-opacity-10	border-color: color-mix(in oklch, var(--cui-border) 10%, transparent);
.border-opacity-25	border-color: color-mix(in oklch, var(--cui-border) 25%, transparent);
.border-opacity-50	border-color: color-mix(in oklch, var(--cui-border) 50%, transparent);
.border-opacity-75	border-color: color-mix(in oklch, var(--cui-border) 75%, transparent);
.border-opacity-100	border-color: var(--cui-border);

On this page

Color

Change the border color using utilities built on our theme colors.

html

<span class="border border-primary"></span>
<span class="border border-subtle-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-subtle-secondary"></span>
<span class="border border-success"></span>
<span class="border border-subtle-success"></span>
<span class="border border-info"></span>
<span class="border border-subtle-info"></span>
<span class="border border-warning"></span>
<span class="border border-subtle-warning"></span>
<span class="border border-danger"></span>
<span class="border border-subtle-danger"></span>
<span class="border border-inverse"></span>
<span class="border border-subtle-inverse"></span>

<span class="border border-black"></span>
<span class="border border-white"></span>

Neutral

Four weights sit between the page and a themed border, for lines that separate content without naming a color. .border-emphasized is the strongest, .border-body is the default weight a plain .border already draws, and .border-subtle is the faintest.

html

<span class="border border-emphasized"></span>
<span class="border border-body"></span>
<span class="border border-muted"></span>
<span class="border border-subtle"></span>

Each is a light-dark() pair, so the ladder keeps its order in both color schemes rather than fading out in one of them.

Naming the default is what lets you return to it. Dropping .border-primary gets you there when the class is yours to remove, but not when the color arrives from a component’s own rule, a breakpoint or a .theme-* block — there, .border-body is the way back.

.border-bg is the odd one out: it paints the line in the page background color, so the border holds its space without being seen. Reach for it when a visible border appears on hover or on a state, and the element would otherwise shift by the width of the line.

html

<span class="border border-bg"></span>
<span class="border border-body"></span>

Sides

Using utilities you can change the border on one side only, or you can change all borders to make them different colors.

html

<span class="border-top border-top-primary"></span>
<span class="border-end border-end-primary"></span>
<span class="border-bottom border-bottom-primary"></span>
<span class="border-start border-start-primary"></span>
<span class="border-start border-start-primary border-end border-end-danger"></span>
<span class="border-top border-top-primary border-end border-end-danger border-bottom border-bottom-success"></span>
<span class="border border-top-primary border-end-danger border-bottom-success border-start-info"></span>

Recoloring a component

The same utilities repaint the border a component ships with:

Email address

Dangerous heading

Changing border color and width

html

<div class="mb-5">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-3 mb-5 fg-danger border-bottom border-danger">
  Dangerous heading
</div>

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

Opacity

Every .border-{color} utility writes its colour into --cui-border and reads it back, so a companion .border-{percentage} class can mix that colour with transparent through color-mix(), in the browser, without recompiling Sass.

.border-success {
  --cui-border: var(--cui-success-bg);
  border-color: var(--cui-border);
}

.border-50 {
  border-color: color-mix(in oklch, var(--cui-border) 50%, transparent);
}

Override --cui-border to repaint the utility with another colour; the opacity class keeps working, because it reads whatever the token holds.

This is default success border

This is 70% opacity success border

This is 50% opacity success border

This is 30% opacity success border

This is 10% opacity success border

html

<div class="border border-success p-3 mb-3">This is default success border</div>
<div class="border border-success p-3 mb-3 border-70">This is 70% opacity success border</div>
<div class="border border-success p-3 mb-3 border-50">This is 50% opacity success border</div>
<div class="border border-success p-3 mb-3 border-30">This is 30% opacity success border</div>
<div class="border border-success p-3 border-10">This is 10% opacity success border</div>

.border-opacity-{10|25|50|75|100} and .border-{color}-subtle are the deprecated v5 spellings of .border-{percentage} and .border-subtle-{color}; they still render and are removed in v7.

Customizing

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: (
    --cui-border: null,
    border-color: var(--cui-border),
  ),
  class: border,
  values: $utilities-border-colors
),
"border-top-color": (
  property: border-top-color,
  class: border-top,
  values: map.merge(theme-color-refs("bg"), ("white": var(--cui-white)))
),
"border-end-color": (
  property: border-inline-end-color,
  class: border-end,
  values: map.merge(theme-color-refs("bg"), ("white": var(--cui-white)))
),
"border-bottom-color": (
  property: border-bottom-color,
  class: border-bottom,
  values: map.merge(theme-color-refs("bg"), ("white": var(--cui-white)))
),
"border-start-color": (
  property: border-inline-start-color,
  class: border-start,
  values: map.merge(theme-color-refs("bg"), ("white": var(--cui-white)))
),

scss

"border-color-subtle": (
  property: (
    --cui-border: null,
    border-color: var(--cui-border),
  ),
  class: border-subtle,
  values: theme-color-refs("border")
),
"border-opacity": (
  class: border,
  property: border-color,
  values: theme-opacity-values(--cui-border)
),
// deprecated
"border-color-subtle-legacy": (
  property: (
    --cui-border: null,
    border-color: var(--cui-border),
  ),
  class: border,
  values: $utilities-border-subtle
),
// deprecated
"border-opacity-legacy": (
  class: border-opacity,
  property: border-color,
  values: theme-opacity-values(--cui-border, null, (10: .1, 25: .25, 50: .5, 75: .75, 100: 1))
),