Vue Border color Utilities

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.

vue

<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, the default --cui-border-color sits in the middle, and .border-subtle is the faintest.

vue

<span class="border border-emphasized"></span>
<span class="border"></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.

Sides

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

vue

<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

vue

<div class="mb-5">
  <CFormLabel for="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" class="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

vue

<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

Sass variables

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