Borders

Additive Border


	<span class="border border-container"></span>
	<span class="border-top border-container"></span>
	<span class="border-end border-container"></span>
	<span class="border-bottom border-container"></span>
	<span class="border-start border-container"></span>

Subtractive Border


	<span class="border border-0 border-container"></span>
	<span class="border border-top-0 border-container"></span>
	<span class="border border-end-0 border-container"></span>
	<span class="border border-bottom-0 border-container"></span>
	<span class="border border-start-0 border-container"></span>

Color Border


	<span class="border border-primary border-container"></span>
	<span class="border border-primary-subtle border-container"></span>
	<span class="border border-secondary border-container"></span>
	<span class="border border-secondary-subtle border-container"></span>
	<span class="border border-success border-container"></span>
	<span class="border border-success-subtle border-container"></span>
	<span class="border border-danger border-container"></span>
	<span class="border border-danger-subtle border-container"></span>
	<span class="border border-warning border-container"></span>
	<span class="border border-warning-subtle border-container"></span>
	<span class="border border-info border-container"></span>
	<span class="border border-info-subtle border-container"></span>
	<span class="border border-light border-container"></span>
	<span class="border border-light-subtle border-container"></span>
	<span class="border border-dark border-container"></span>
	<span class="border border-dark-subtle border-container"></span>
	<span class="border border-black border-container"></span>
	<span class="border border-white border-container"></span>

Border Width


	<span class="border border-1 border-container"></span>
	<span class="border border-2 border-container"></span>
	<span class="border border-3 border-container"></span>
	<span class="border border-4 border-container"></span>
	<span class="border border-5 border-container"></span>

Border Radius

user-1 user-2 user-3 user-4 user-5 user-6 user-7

	<div class="d-sm-flex">
		<img src="assets/images/user/user-1.jpg" class="rounded wh-60 me-2" alt="user-1">
		<img src="assets/images/user/user-2.jpg" class="rounded-top wh-60 me-2" alt="user-2">
		<img src="assets/images/user/user-3.jpg" class="rounded-end wh-60 me-2" alt="user-3">
		<img src="assets/images/user/user-4.jpg" class="rounded-bottom wh-60 me-2" alt="user-4">
		<img src="assets/images/user/user-5.jpg" class="rounded-start wh-60 me-2" alt="user-5">
		<img src="assets/images/user/user-6.jpg" class="rounded-circle wh-60 me-2" alt="user-6">
		<img src="assets/images/user/user-7.jpg" class="rounded-pill wh-60 me-2" alt="user-7">
	</div>

Border Radius Sizes

user-1 user-2 user-3 user-4 user-5 user-6 user-7

	<div class="d-sm-flex">
		<img src="assets/images/user/user-1.jpg" class="rounded-0 wh-60 me-2" alt="user-1">
		<img src="assets/images/user/user-2.jpg" class="rounded-1 wh-60 me-2" alt="user-2">
		<img src="assets/images/user/user-3.jpg" class="rounded-2 wh-60 me-2" alt="user-3">
		<img src="assets/images/user/user-4.jpg" class="rounded-3 wh-60 me-2" alt="user-4">
		<img src="assets/images/user/user-5.jpg" class="rounded-4 wh-60 me-2" alt="user-5">
		<img src="assets/images/user/user-6.jpg" class="rounded-5 wh-60 me-2" alt="user-6">
		<img src="assets/images/user/user-7.jpg" class="rounded-6 wh-60 me-2" alt="user-7">
	</div>

Border Radius Sizes

user-1 user-2 user-3 user-4 user-5 user-6

	<div class="d-sm-flex">
		<img src="assets/images/user/user-1.jpg" class="rounded-bottom-1 wh-60 me-2" alt="user-1">
		<img src="assets/images/user/user-2.jpg" class="rounded-start-2 wh-60 me-2" alt="user-2">
		<img src="assets/images/user/user-3.jpg" class="rounded-end-circle wh-60 me-2" alt="user-3">
		<img src="assets/images/user/user-4.jpg" class="rounded-start-pill wh-60 me-2" alt="user-4">
		<img src="assets/images/user/user-5.jpg" class="rounded-4 wh-60 me-2" alt="user-5">
		<img src="assets/images/user/user-6.jpg" class="rounded-5 rounded-top-0 wh-60 me-2" alt="user-6">
	</div>

Border Just

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

	<div class="border border-success p-2 mb-2">This is default success border</div>
	<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

Theme System