Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

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:

Subtractive

Or remove borders:

Color

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

Or modify the default border-color of a component:

Opacity

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.

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.

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

Width

Radius

Add classes to an element to easily round its corners.

Sizes

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

CSS

Variables

Sass variables

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

Sass maps

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

Sass mixins

Sass utilities API

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