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:

{ { < example class="bd-example-border-utils" }} { {< /example >} }

Subtractive#

Or remove borders:

{ { < example class="bd-example-border-utils" }} { {< /example >} }

Color#

{ { < callout info }} Border utilities like .border-* that generated from our original $theme-colors Sass map don't yet respond to color modes, however, any .border-*-subtle utility will. This will be resolved in v6. { { < /callout }}

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

{ { < example class="bd-example-border-utils" }} { {< border.inline >} } { {- range (index $.Site.Data "theme-colors") } } { {- end -} } { {< /border.inline >} } { {< /example >} }

Or modify the default border-color of a component:

{ {< example >} }

Dangerous heading
Changing border color and width

{ {< /example >} }

Opacity#

{ { < added-in "5.2.0" }}

Bootstrap border-{color} utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works#

Consider our default .border-success utility.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

We use an RGB version of our --bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-border-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .border-success now, your computed color value is rgba(25, 135, 84, 1). The local CSS variable inside each .border-* class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.

Example#

To change that opacity, override --bs-border-opacity via custom styles or inline styles.

{ {< example >} }

This is default success border
This is 50% opacity success border

{ {< /example >} }

Or, choose from any of the .border-opacity utilities:

{ {< example >} }

This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border

{ {< /example >} }

Width#

{ { < example class="bd-example-border-utils" }} { {< /example >} }

Radius#

Add classes to an element to easily round its corners.

{ { < example class="bd-example-rounded-utils" }} { { < placeholder width="75" height="75" class="rounded" title="Example rounded image" }} { { < placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" }} { { < placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" }} { { < placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" }} { { < placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" }} { { < placeholder width="75" height="75" class="rounded-circle" title="Completely round image" }} { { < placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" }} { {< /example >} }

Sizes#

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5, and can be configured by modifying the utilities API.

{ { < example class="bd-example-rounded-utils" }} { { < placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" }} { { < placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" }} { { < placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" }} { { < placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" }} { { < placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" }} { { < placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" }} { {< /example >} }

{ { < example class="bd-example-rounded-utils" }} { { < placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" }} { { < placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" }} { { < placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" }} { { < placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" }} { { < placeholder width="75" height="75" class="rounded-5 rounded-top-0" title=" Example extra large bottom rounded image" }} { {< /example >} }

CSS#

Variables#

{ { < added-in "5.2.0" }}

{ { < scss-docs name="root-border-var" file="scss/_root.scss" }}

Sass variables#

{ { < scss-docs name="border-variables" file="scss/_variables.scss" }}

{ { < scss-docs name="border-radius-variables" file="scss/_variables.scss" }}

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

{ { < scss-docs name="theme-border-subtle-variables" file="scss/_ variables.scss" }}

{ { < scss-docs name="theme-border-subtle-dark-variables" file="scss/_ variables-dark.scss" }}

Sass maps#

Color mode adaptive border colors are also available as a Sass map:

{ { < scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" }}

{ { < scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" }}

Sass mixins#

{ { < scss-docs name="border-radius-mixins" file="scss/mixins/_ border-radius.scss" }}

Sass utilities API#

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

{ { < scss-docs name="utils-borders" file="scss/_utilities.scss" }}

{ { < scss-docs name="utils-border-radius" file="scss/_utilities.scss" }}