Border Color

new

Utilities for controlling the border color of an element.

Contents

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

Quick reference

Class	Properties
.border-primary	border-color: rgb(0, 82, 204);
.border-secondary	border-color: rgb(82, 67, 170);
.border-success	border-color: rgb(0, 135, 90);
.border-danger	border-color: rgb(222, 53, 11);
.border-warning	border-color: rgb(255, 171, 0);
.border-info	border-color: rgb(66, 82, 110);
.border-light	border-color: rgb(250, 251, 252);
.border-dark	border-color: rgb(9, 30, 66);
.border-white	border-color: rgb(255, 255, 255);
.border-blue-50	border-color: rgb(222, 235, 255);
.border-blue-75	border-color: rgb(179, 212, 255);
.border-blue-100	border-color: rgb(76, 154, 255);
.border-blue-200	border-color: rgb(38, 132, 255);
.border-blue-300	border-color: rgb(0, 101, 255);
.border-blue-400	border-color: rgb(0, 82, 204);
.border-blue-500	border-color: rgb(7, 71, 166);
.border-green-50	border-color: rgb(227, 252, 239);
.border-green-75	border-color: rgb(171, 245, 209);
.border-green-100	border-color: rgb(121, 242, 192);
.border-green-200	border-color: rgb(87, 217, 163);
.border-green-300	border-color: rgb(54, 179, 126);
.border-green-400	border-color: rgb(0, 135, 90);
.border-green-500	border-color: rgb(0, 102, 68);
.border-neutral-0	border-color: rgb(255, 255, 255);
.border-neutral-10	border-color: rgb(250, 251, 252);
.border-neutral-20	border-color: rgb(244, 245, 247);
.border-neutral-30	border-color: rgb(235, 236, 240);
.border-neutral-40	border-color: rgb(223, 225, 230);
.border-neutral-50	border-color: rgb(193, 199, 208);
.border-neutral-60	border-color: rgb(179, 186, 197);
.border-neutral-70	border-color: rgb(165, 173, 186);
.border-neutral-80	border-color: rgb(151, 160, 175);
.border-neutral-90	border-color: rgb(137, 147, 164);
.border-neutral-100	border-color: rgb(122, 134, 154);
.border-neutral-200	border-color: rgb(107, 119, 140);
.border-neutral-300	border-color: rgb(94, 108, 132);
.border-neutral-400	border-color: rgb(80, 95, 121);
.border-neutral-500	border-color: rgb(66, 82, 110);
.border-neutral-600	border-color: rgb(52, 69, 99);
.border-neutral-700	border-color: rgb(37, 56, 88);
.border-neutral-800	border-color: rgb(23, 43, 77);
.border-neutral-900	border-color: rgb(9, 30, 66);
.border-purple-50	border-color: rgb(234, 230, 255);
.border-purple-75	border-color: rgb(192, 182, 242);
.border-purple-100	border-color: rgb(153, 141, 217);
.border-purple-200	border-color: rgb(135, 119, 217);
.border-purple-300	border-color: rgb(101, 84, 192);
.border-purple-400	border-color: rgb(82, 67, 170);
.border-purple-500	border-color: rgb(64, 50, 148);
.border-red-50	border-color: rgb(255, 235, 230);
.border-red-75	border-color: rgb(255, 189, 173);
.border-red-100	border-color: rgb(255, 143, 115);
.border-red-200	border-color: rgb(255, 116, 82);
.border-red-300	border-color: rgb(255, 86, 48);
.border-red-400	border-color: rgb(222, 53, 11);
.border-red-500	border-color: rgb(191, 38, 0);
.border-teal-50	border-color: rgb(230, 252, 255);
.border-teal-75	border-color: rgb(179, 245, 255);
.border-teal-100	border-color: rgb(121, 226, 242);
.border-teal-200	border-color: rgb(0, 199, 230);
.border-teal-300	border-color: rgb(0, 184, 217);
.border-teal-400	border-color: rgb(0, 163, 191);
.border-teal-500	border-color: rgb(0, 141, 166);
.border-yellow-50	border-color: rgb(255, 250, 230);
.border-yellow-75	border-color: rgb(255, 240, 179);
.border-yellow-100	border-color: rgb(255, 227, 128);
.border-yellow-200	border-color: rgb(255, 196, 0);
.border-yellow-300	border-color: rgb(255, 171, 0);
.border-yellow-400	border-color: rgb(255, 153, 31);
.border-yellow-500	border-color: rgb(255, 139, 0);

Basic usage

Setting the border color

Control the border color of an element using the border-{color} utilities.

<div class="border border-primary ..."></div>
<div class="border border-dark ..."></div>
<div class="border border-red-400 ..."></div>
<div class="border border-teal-400 ..."></div>

Changing the border color

Use the border-{color} to modify the default border-color of a component.

Password

Your password must be 8-20 characters long.

<input class="form-control border-danger ..." />

Changing the opacity

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

  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: 1"></div>
  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: .75"></div>
  <div class="border border-4 border-secondary ..." style="--bs-border-opacity: .5"></div>