Hire UsGet CoreUI PRO all-access →

React Border color Utilities

Border color

MarkdownChatGPTClaude

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

ClassStyles
.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-10border-color: color-mix(in oklch, var(--cui-border) 10%, transparent);
.border-20border-color: color-mix(in oklch, var(--cui-border) 20%, transparent);
.border-30border-color: color-mix(in oklch, var(--cui-border) 30%, transparent);
.border-40border-color: color-mix(in oklch, var(--cui-border) 40%, transparent);
.border-50border-color: color-mix(in oklch, var(--cui-border) 50%, transparent);
.border-60border-color: color-mix(in oklch, var(--cui-border) 60%, transparent);
.border-70border-color: color-mix(in oklch, var(--cui-border) 70%, transparent);
.border-80border-color: color-mix(in oklch, var(--cui-border) 80%, transparent);
.border-90border-color: color-mix(in oklch, var(--cui-border) 90%, transparent);
.border-100border-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-10border-color: color-mix(in oklch, var(--cui-border) 10%, transparent);
.border-opacity-25border-color: color-mix(in oklch, var(--cui-border) 25%, transparent);
.border-opacity-50border-color: color-mix(in oklch, var(--cui-border) 50%, transparent);
.border-opacity-75border-color: color-mix(in oklch, var(--cui-border) 75%, transparent);
.border-opacity-100border-color: var(--cui-border);
On this page

Color

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

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

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

<span className="border border-black"></span>
<span className="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.

<span className="border border-emphasized"></span>
<span className="border"></span>
<span className="border border-muted"></span>
<span className="border border-subtle"></span>
<span className="border border-emphasized"></span>
<span className="border"></span>
<span className="border border-muted"></span>
<span className="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.

<span className="border-top border-top-primary"></span>
<span className="border-end border-end-primary"></span>
<span className="border-bottom border-bottom-primary"></span>
<span className="border-start border-start-primary"></span>
<span className="border-start border-start-primary border-end border-end-danger"></span>
<span className="border-top border-top-primary border-end border-end-danger border-bottom border-bottom-success"></span>
<span className="border border-top-primary border-end-danger border-bottom-success border-start-info"></span>
<span className="border-top border-top-primary"></span>
<span className="border-end border-end-primary"></span>
<span className="border-bottom border-bottom-primary"></span>
<span className="border-start border-start-primary"></span>
<span className="border-start border-start-primary border-end border-end-danger"></span>
<span className="border-top border-top-primary border-end border-end-danger border-bottom border-bottom-success"></span>
<span className="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:

Dangerous heading
Changing border color and width 
<div className="mb-5">
  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" className="border-success" id="exampleFormControlInput1" placeholder="[email protected]" />
</div>

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

<div className="p-4 bg-info bg-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>
<div className="mb-5">
  <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" className="border-success" id="exampleFormControlInput1" placeholder="[email protected]" />
</div>

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

<div className="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
<div className="border border-success p-3 mb-3">This is default success border</div>
<div className="border border-success p-3 mb-3 border-70">This is 70% opacity success border</div>
<div className="border border-success p-3 mb-3 border-50">This is 50% opacity success border</div>
<div className="border border-success p-3 mb-3 border-30">This is 30% opacity success border</div>
<div className="border border-success p-3 border-10">This is 10% opacity success border</div>
<div className="border border-success p-3 mb-3">This is default success border</div>
<div className="border border-success p-3 mb-3 border-70">This is 70% opacity success border</div>
<div className="border border-success p-3 mb-3 border-50">This is 50% opacity success border</div>
<div className="border border-success p-3 mb-3 border-30">This is 30% opacity success border</div>
<div className="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))
),