Skip to main content

Borders

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:

Result
Loading...
Live Editor
<div className="bd-example-border-utils">
	<span className="border"></span>
	<span className="border-top"></span>
	<span className="border-end"></span>
	<span className="border-bottom"></span>
	<span className="border-start"></span>
</div>

Subtractive​

Or remove borders:

Result
Loading...
Live Editor
<div className="bd-example-border-utils">
	<span className="border border-0"></span>
	<span className="border border-top-0"></span>
	<span className="border border-end-0"></span>
	<span className="border border-bottom-0"></span>
	<span className="border border-start-0"></span>
</div>

Color​

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

Result
Loading...
Live Editor
<div className="bd-example-border-utils">
	{themeColors.map((themeColor) => (
		<React.Fragment key={themeColor.name}>
			<span className={`border border-${themeColor.name}`}></span>
			<span className={`border border-${themeColor.name}-subtle`}></span>
		</React.Fragment>
	))}
	<span className="border border-black"></span>
	<span className="border border-white"></span>
</div>

Opacity​

Kyber 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.

Result
Loading...
Live Editor
<div>
	<div className="border border-success p-2 mb-2">This is default success border</div>
	<div className="border border-success p-2" style={{ '--bs-border-opacity': '.5' }}>
		This is 50% opacity success border
	</div>
</div>

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

Result
Loading...
Live Editor
<div>
	<div className="border border-success p-2 mb-2">This is default success border</div>
	<div className="border border-success p-2 mb-2 border-opacity-75">
		This is 75% opacity success border
	</div>
	<div className="border border-success p-2 mb-2 border-opacity-50">
		This is 50% opacity success border
	</div>
	<div className="border border-success p-2 mb-2 border-opacity-25">
		This is 25% opacity success border
	</div>
	<div className="border border-success p-2 border-opacity-10">
		This is 10% opacity success border
	</div>
</div>

Width​

Result
Loading...
Live Editor
<div className="bd-example-border-utils">
	<span className="border border-1"></span>
	<span className="border border-2"></span>
	<span className="border border-3"></span>
	<span className="border border-4"></span>
	<span className="border border-5"></span>
</div>

Radius​

Add classes to an element to easily round its corners.

Result
Loading...
Live Editor
<div className="bd-example-rounded-utils">
	<Placeholder width="75" height="75" className="rounded" title="Example rounded image" />
	<Placeholder width="75" height="75" className="rounded-top" title="Example top rounded image" />
	<Placeholder width="75" height="75" className="rounded-end" title="Example right rounded image" />
	<Placeholder
		width="75"
		height="75"
		className="rounded-bottom"
		title="Example bottom rounded image"
	/>
	<Placeholder
		width="75"
		height="75"
		className="rounded-start"
		title="Example left rounded image"
	/>
</div>

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.

Result
Loading...
Live Editor
<div className="bd-example-rounded-utils">
	<Placeholder width="75" height="75" className="rounded-0" title="Example non-rounded image" />
	<Placeholder width="75" height="75" className="rounded-1" title="Example small rounded image" />
	<Placeholder width="75" height="75" className="rounded-2" title="Example default rounded image" />
	<Placeholder width="75" height="75" className="rounded-3" title="Example large rounded image" />
	<Placeholder width="75" height="75" className="rounded-4" title="Example larger rounded image" />
	<Placeholder
		width="75"
		height="75"
		className="rounded-5"
		title="Example extra large rounded image"
	/>
	<Placeholder width="75" height="75" className="rounded-circle" title="Completely round image" />
	<Placeholder width="150" height="75" className="rounded-pill" title="Rounded pill image" />
</div>
Result
Loading...
Live Editor
<div className="bd-example-rounded-utils">
	<Placeholder
		width="75"
		height="75"
		className="rounded-bottom-1"
		title="Example small rounded image"
	/>
	<Placeholder
		width="75"
		height="75"
		className="rounded-start-2"
		title="Example default left rounded image"
	/>
	<Placeholder
		width="75"
		height="75"
		className="rounded-end-circle"
		title="Example right completely round image"
	/>
	<Placeholder
		width="75"
		height="75"
		className="rounded-start-pill"
		title="Example left rounded pill image"
	/>
	<Placeholder
		width="75"
		height="75"
		className="rounded-5 rounded-top-0"
		title="Example extra large bottom rounded image"
	/>
</div>