Border Color

Utility	Properties
bc-red-1	border-color: rgb(249, 224, 224);
bc-red-2	border-color: rgb(243, 197, 197);
bc-red-3	border-color: rgb(237, 170, 170);
bc-red-4	border-color: rgb(232, 142, 142);
bc-red-5	border-color: rgb(226, 115, 115);
bc-red-6	border-color: rgb(221, 88, 88);
bc-red	border-color: rgb(215, 61, 61);
bc-red-7	border-color: rgb(185, 52, 52);
bc-red-8	border-color: rgb(155, 44, 44);
bc-red-9	border-color: rgb(125, 35, 35);
bc-red-10	border-color: rgb(95, 27, 27);
bc-red-11	border-color: rgb(65, 18, 18);
bc-red-12	border-color: rgb(34, 10, 10);
bc-orange-1	border-color: rgb(250, 231, 217);
bc-orange-2	border-color: rgb(246, 210, 185);
bc-orange-3	border-color: rgb(241, 189, 152);
bc-orange-4	border-color: rgb(237, 167, 119);
bc-orange-5	border-color: rgb(233, 146, 86);
bc-orange-6	border-color: rgb(228, 125, 53);
bc-orange	border-color: rgb(224, 104, 20);
bc-orange-7	border-color: rgb(193, 89, 17);
bc-orange-8	border-color: rgb(161, 75, 14);
bc-orange-9	border-color: rgb(130, 60, 12);
bc-orange-10	border-color: rgb(99, 46, 9);
bc-orange-11	border-color: rgb(67, 31, 6);
bc-orange-12	border-color: rgb(36, 17, 3);
bc-yellow-1	border-color: rgb(248, 240, 215);
bc-yellow-2	border-color: rgb(242, 227, 181);
bc-yellow-3	border-color: rgb(236, 214, 146);
bc-yellow-4	border-color: rgb(229, 200, 111);
bc-yellow-5	border-color: rgb(223, 187, 76);
bc-yellow-6	border-color: rgb(217, 174, 42);
bc-yellow	border-color: rgb(211, 161, 7);
bc-yellow-7	border-color: rgb(181, 138, 6);
bc-yellow-8	border-color: rgb(152, 116, 5);
bc-yellow-9	border-color: rgb(122, 93, 4);
bc-yellow-10	border-color: rgb(93, 71, 3);
bc-yellow-11	border-color: rgb(63, 48, 2);
bc-yellow-12	border-color: rgb(34, 26, 1);
bc-green-1	border-color: rgb(219, 243, 228);
bc-green-2	border-color: rgb(188, 232, 204);
bc-green-3	border-color: rgb(156, 221, 180);
bc-green-4	border-color: rgb(125, 210, 156);
bc-green-5	border-color: rgb(94, 199, 133);
bc-green-6	border-color: rgb(62, 188, 109);
bc-green	border-color: rgb(31, 177, 85);
bc-green-7	border-color: rgb(27, 152, 73);
bc-green-8	border-color: rgb(22, 127, 61);
bc-green-9	border-color: rgb(18, 103, 49);
bc-green-10	border-color: rgb(14, 78, 37);
bc-green-11	border-color: rgb(9, 53, 26);
bc-green-12	border-color: rgb(5, 28, 14);
bc-teal-1	border-color: rgb(217, 241, 238);
bc-teal-2	border-color: rgb(184, 228, 223);
bc-teal-3	border-color: rgb(151, 216, 208);
bc-teal-4	border-color: rgb(118, 203, 194);
bc-teal-5	border-color: rgb(84, 191, 179);
bc-teal-6	border-color: rgb(51, 178, 164);
bc-teal	border-color: rgb(18, 166, 149);
bc-teal-7	border-color: rgb(15, 143, 128);
bc-teal-8	border-color: rgb(13, 120, 107);
bc-teal-9	border-color: rgb(10, 96, 86);
bc-teal-10	border-color: rgb(8, 73, 66);
bc-teal-11	border-color: rgb(5, 50, 45);
bc-teal-12	border-color: rgb(3, 27, 24);
bc-cyan-1	border-color: rgb(215, 240, 245);
bc-cyan-2	border-color: rgb(180, 228, 236);
bc-cyan-3	border-color: rgb(145, 215, 227);
bc-cyan-4	border-color: rgb(110, 202, 218);
bc-cyan-5	border-color: rgb(75, 189, 209);
bc-cyan-6	border-color: rgb(40, 177, 200);
bc-cyan	border-color: rgb(5, 164, 191);
bc-cyan-7	border-color: rgb(4, 141, 164);
bc-cyan-8	border-color: rgb(4, 118, 138);
bc-cyan-9	border-color: rgb(3, 95, 111);
bc-cyan-10	border-color: rgb(2, 72, 84);
bc-cyan-11	border-color: rgb(2, 49, 57);
bc-cyan-12	border-color: rgb(1, 26, 31);
bc-blue-1	border-color: rgb(223, 233, 250);
bc-blue-2	border-color: rgb(194, 214, 245);
bc-blue-3	border-color: rgb(166, 194, 240);
bc-blue-4	border-color: rgb(138, 175, 235);
bc-blue-5	border-color: rgb(110, 156, 231);
bc-blue-6	border-color: rgb(81, 136, 226);
bc-blue	border-color: rgb(53, 117, 221);
bc-blue-7	border-color: rgb(46, 101, 190);
bc-blue-8	border-color: rgb(38, 84, 159);
bc-blue-9	border-color: rgb(31, 68, 128);
bc-blue-10	border-color: rgb(23, 51, 97);
bc-blue-11	border-color: rgb(16, 35, 66);
bc-blue-12	border-color: rgb(8, 19, 35);
bc-indigo-1	border-color: rgb(228, 229, 249);
bc-indigo-2	border-color: rgb(205, 206, 244);
bc-indigo-3	border-color: rgb(182, 183, 238);
bc-indigo-4	border-color: rgb(159, 160, 233);
bc-indigo-5	border-color: rgb(135, 138, 228);
bc-indigo-6	border-color: rgb(112, 115, 222);
bc-indigo	border-color: rgb(89, 92, 217);
bc-indigo-7	border-color: rgb(77, 79, 187);
bc-indigo-8	border-color: rgb(64, 66, 156);
bc-indigo-9	border-color: rgb(52, 53, 126);
bc-indigo-10	border-color: rgb(39, 40, 95);
bc-indigo-11	border-color: rgb(27, 28, 65);
bc-indigo-12	border-color: rgb(14, 15, 35);
bc-violet-1	border-color: rgb(234, 227, 250);
bc-violet-2	border-color: rgb(216, 203, 245);
bc-violet-3	border-color: rgb(198, 179, 240);
bc-violet-4	border-color: rgb(180, 155, 235);
bc-violet-5	border-color: rgb(161, 131, 231);
bc-violet-6	border-color: rgb(143, 107, 226);
bc-violet	border-color: rgb(125, 83, 221);
bc-violet-7	border-color: rgb(108, 71, 190);
bc-violet-8	border-color: rgb(90, 60, 159);
bc-violet-9	border-color: rgb(73, 48, 128);
bc-violet-10	border-color: rgb(55, 37, 97);
bc-violet-11	border-color: rgb(38, 25, 66);
bc-violet-12	border-color: rgb(20, 13, 35);
bc-pink-1	border-color: rgb(248, 225, 236);
bc-pink-2	border-color: rgb(242, 198, 220);
bc-pink-3	border-color: rgb(236, 171, 204);
bc-pink-4	border-color: rgb(230, 145, 187);
bc-pink-5	border-color: rgb(224, 118, 171);
bc-pink-6	border-color: rgb(218, 92, 154);
bc-pink	border-color: rgb(212, 65, 138);
bc-pink-7	border-color: rgb(182, 56, 119);
bc-pink-8	border-color: rgb(153, 47, 99);
bc-pink-9	border-color: rgb(123, 38, 80);
bc-pink-10	border-color: rgb(93, 29, 61);
bc-pink-11	border-color: rgb(64, 20, 41);
bc-pink-12	border-color: rgb(34, 10, 22);
bc-lead-1	border-color: rgb(224, 224, 227);
bc-lead-2	border-color: rgb(197, 197, 202);
bc-lead-3	border-color: rgb(171, 171, 177);
bc-lead-4	border-color: rgb(144, 144, 152);
bc-lead-5	border-color: rgb(117, 117, 128);
bc-lead-6	border-color: rgb(90, 90, 103);
bc-lead	border-color: rgb(63, 63, 78);
bc-lead-7	border-color: rgb(54, 54, 67);
bc-lead-8	border-color: rgb(45, 45, 56);
bc-lead-9	border-color: rgb(37, 37, 45);
bc-lead-10	border-color: rgb(28, 28, 34);
bc-lead-11	border-color: rgb(19, 19, 23);
bc-lead-12	border-color: rgb(10, 10, 12);
bc-gray-1	border-color: rgb(230, 231, 233);
bc-gray-2	border-color: rgb(207, 209, 213);
bc-gray-3	border-color: rgb(185, 188, 193);
bc-gray-4	border-color: rgb(163, 167, 174);
bc-gray-5	border-color: rgb(141, 146, 154);
bc-gray-6	border-color: rgb(118, 124, 135);
bc-gray	border-color: rgb(96, 103, 115);
bc-gray-7	border-color: rgb(83, 89, 99);
bc-gray-8	border-color: rgb(69, 74, 83);
bc-gray-9	border-color: rgb(56, 60, 67);
bc-gray-10	border-color: rgb(42, 45, 51);
bc-gray-11	border-color: rgb(29, 31, 35);
bc-gray-12	border-color: rgb(15, 16, 18);
bc-silver-1	border-color: rgb(245, 245, 246);
bc-silver-2	border-color: rgb(236, 237, 238);
bc-silver-3	border-color: rgb(227, 228, 230);
bc-silver-4	border-color: rgb(218, 220, 223);
bc-silver-5	border-color: rgb(209, 211, 215);
bc-silver-6	border-color: rgb(200, 203, 207);
bc-silver	border-color: rgb(191, 194, 199);
bc-silver-7	border-color: rgb(164, 167, 171);
bc-silver-8	border-color: rgb(138, 140, 143);
bc-silver-9	border-color: rgb(111, 113, 115);
bc-silver-10	border-color: rgb(84, 85, 88);
bc-silver-11	border-color: rgb(57, 58, 60);
bc-silver-12	border-color: rgb(31, 31, 32);
bc-black	border-color: black;
bc-white	border-color: white;
bc-transparent	border-color: transparent;

This example showcases various border colors using the indigo colors from the default color palette.

• The bc-indigo-3 utility applies a lighter indigo shade to the border of an element.
• The bc-indigo utility applies the base indigo shade to the border of an element.
• The bc-indigo-8 utility applies a darker indigo shade to the border of an element.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-indigo-3 d-16"></div>
  <div class="b-2 bc-indigo d-16"></div>
  <div class="b-2 bc-indigo-8 d-16"></div>
</div>

Border Bottom Color

Controls the color of the bottom border of an element.

Utility	Properties
bc-b-red-1	border-bottom-color: rgb(249, 224, 224);
bc-b-red-2	border-bottom-color: rgb(243, 197, 197);
bc-b-red-3	border-bottom-color: rgb(237, 170, 170);
bc-b-red-4	border-bottom-color: rgb(232, 142, 142);
bc-b-red-5	border-bottom-color: rgb(226, 115, 115);
bc-b-red-6	border-bottom-color: rgb(221, 88, 88);
bc-b-red	border-bottom-color: rgb(215, 61, 61);
bc-b-red-7	border-bottom-color: rgb(185, 52, 52);
bc-b-red-8	border-bottom-color: rgb(155, 44, 44);
bc-b-red-9	border-bottom-color: rgb(125, 35, 35);
bc-b-red-10	border-bottom-color: rgb(95, 27, 27);
bc-b-red-11	border-bottom-color: rgb(65, 18, 18);
bc-b-red-12	border-bottom-color: rgb(34, 10, 10);
bc-b-orange-1	border-bottom-color: rgb(250, 231, 217);
bc-b-orange-2	border-bottom-color: rgb(246, 210, 185);
bc-b-orange-3	border-bottom-color: rgb(241, 189, 152);
bc-b-orange-4	border-bottom-color: rgb(237, 167, 119);
bc-b-orange-5	border-bottom-color: rgb(233, 146, 86);
bc-b-orange-6	border-bottom-color: rgb(228, 125, 53);
bc-b-orange	border-bottom-color: rgb(224, 104, 20);
bc-b-orange-7	border-bottom-color: rgb(193, 89, 17);
bc-b-orange-8	border-bottom-color: rgb(161, 75, 14);
bc-b-orange-9	border-bottom-color: rgb(130, 60, 12);
bc-b-orange-10	border-bottom-color: rgb(99, 46, 9);
bc-b-orange-11	border-bottom-color: rgb(67, 31, 6);
bc-b-orange-12	border-bottom-color: rgb(36, 17, 3);
bc-b-yellow-1	border-bottom-color: rgb(248, 240, 215);
bc-b-yellow-2	border-bottom-color: rgb(242, 227, 181);
bc-b-yellow-3	border-bottom-color: rgb(236, 214, 146);
bc-b-yellow-4	border-bottom-color: rgb(229, 200, 111);
bc-b-yellow-5	border-bottom-color: rgb(223, 187, 76);
bc-b-yellow-6	border-bottom-color: rgb(217, 174, 42);
bc-b-yellow	border-bottom-color: rgb(211, 161, 7);
bc-b-yellow-7	border-bottom-color: rgb(181, 138, 6);
bc-b-yellow-8	border-bottom-color: rgb(152, 116, 5);
bc-b-yellow-9	border-bottom-color: rgb(122, 93, 4);
bc-b-yellow-10	border-bottom-color: rgb(93, 71, 3);
bc-b-yellow-11	border-bottom-color: rgb(63, 48, 2);
bc-b-yellow-12	border-bottom-color: rgb(34, 26, 1);
bc-b-green-1	border-bottom-color: rgb(219, 243, 228);
bc-b-green-2	border-bottom-color: rgb(188, 232, 204);
bc-b-green-3	border-bottom-color: rgb(156, 221, 180);
bc-b-green-4	border-bottom-color: rgb(125, 210, 156);
bc-b-green-5	border-bottom-color: rgb(94, 199, 133);
bc-b-green-6	border-bottom-color: rgb(62, 188, 109);
bc-b-green	border-bottom-color: rgb(31, 177, 85);
bc-b-green-7	border-bottom-color: rgb(27, 152, 73);
bc-b-green-8	border-bottom-color: rgb(22, 127, 61);
bc-b-green-9	border-bottom-color: rgb(18, 103, 49);
bc-b-green-10	border-bottom-color: rgb(14, 78, 37);
bc-b-green-11	border-bottom-color: rgb(9, 53, 26);
bc-b-green-12	border-bottom-color: rgb(5, 28, 14);
bc-b-teal-1	border-bottom-color: rgb(217, 241, 238);
bc-b-teal-2	border-bottom-color: rgb(184, 228, 223);
bc-b-teal-3	border-bottom-color: rgb(151, 216, 208);
bc-b-teal-4	border-bottom-color: rgb(118, 203, 194);
bc-b-teal-5	border-bottom-color: rgb(84, 191, 179);
bc-b-teal-6	border-bottom-color: rgb(51, 178, 164);
bc-b-teal	border-bottom-color: rgb(18, 166, 149);
bc-b-teal-7	border-bottom-color: rgb(15, 143, 128);
bc-b-teal-8	border-bottom-color: rgb(13, 120, 107);
bc-b-teal-9	border-bottom-color: rgb(10, 96, 86);
bc-b-teal-10	border-bottom-color: rgb(8, 73, 66);
bc-b-teal-11	border-bottom-color: rgb(5, 50, 45);
bc-b-teal-12	border-bottom-color: rgb(3, 27, 24);
bc-b-cyan-1	border-bottom-color: rgb(215, 240, 245);
bc-b-cyan-2	border-bottom-color: rgb(180, 228, 236);
bc-b-cyan-3	border-bottom-color: rgb(145, 215, 227);
bc-b-cyan-4	border-bottom-color: rgb(110, 202, 218);
bc-b-cyan-5	border-bottom-color: rgb(75, 189, 209);
bc-b-cyan-6	border-bottom-color: rgb(40, 177, 200);
bc-b-cyan	border-bottom-color: rgb(5, 164, 191);
bc-b-cyan-7	border-bottom-color: rgb(4, 141, 164);
bc-b-cyan-8	border-bottom-color: rgb(4, 118, 138);
bc-b-cyan-9	border-bottom-color: rgb(3, 95, 111);
bc-b-cyan-10	border-bottom-color: rgb(2, 72, 84);
bc-b-cyan-11	border-bottom-color: rgb(2, 49, 57);
bc-b-cyan-12	border-bottom-color: rgb(1, 26, 31);
bc-b-blue-1	border-bottom-color: rgb(223, 233, 250);
bc-b-blue-2	border-bottom-color: rgb(194, 214, 245);
bc-b-blue-3	border-bottom-color: rgb(166, 194, 240);
bc-b-blue-4	border-bottom-color: rgb(138, 175, 235);
bc-b-blue-5	border-bottom-color: rgb(110, 156, 231);
bc-b-blue-6	border-bottom-color: rgb(81, 136, 226);
bc-b-blue	border-bottom-color: rgb(53, 117, 221);
bc-b-blue-7	border-bottom-color: rgb(46, 101, 190);
bc-b-blue-8	border-bottom-color: rgb(38, 84, 159);
bc-b-blue-9	border-bottom-color: rgb(31, 68, 128);
bc-b-blue-10	border-bottom-color: rgb(23, 51, 97);
bc-b-blue-11	border-bottom-color: rgb(16, 35, 66);
bc-b-blue-12	border-bottom-color: rgb(8, 19, 35);
bc-b-indigo-1	border-bottom-color: rgb(228, 229, 249);
bc-b-indigo-2	border-bottom-color: rgb(205, 206, 244);
bc-b-indigo-3	border-bottom-color: rgb(182, 183, 238);
bc-b-indigo-4	border-bottom-color: rgb(159, 160, 233);
bc-b-indigo-5	border-bottom-color: rgb(135, 138, 228);
bc-b-indigo-6	border-bottom-color: rgb(112, 115, 222);
bc-b-indigo	border-bottom-color: rgb(89, 92, 217);
bc-b-indigo-7	border-bottom-color: rgb(77, 79, 187);
bc-b-indigo-8	border-bottom-color: rgb(64, 66, 156);
bc-b-indigo-9	border-bottom-color: rgb(52, 53, 126);
bc-b-indigo-10	border-bottom-color: rgb(39, 40, 95);
bc-b-indigo-11	border-bottom-color: rgb(27, 28, 65);
bc-b-indigo-12	border-bottom-color: rgb(14, 15, 35);
bc-b-violet-1	border-bottom-color: rgb(234, 227, 250);
bc-b-violet-2	border-bottom-color: rgb(216, 203, 245);
bc-b-violet-3	border-bottom-color: rgb(198, 179, 240);
bc-b-violet-4	border-bottom-color: rgb(180, 155, 235);
bc-b-violet-5	border-bottom-color: rgb(161, 131, 231);
bc-b-violet-6	border-bottom-color: rgb(143, 107, 226);
bc-b-violet	border-bottom-color: rgb(125, 83, 221);
bc-b-violet-7	border-bottom-color: rgb(108, 71, 190);
bc-b-violet-8	border-bottom-color: rgb(90, 60, 159);
bc-b-violet-9	border-bottom-color: rgb(73, 48, 128);
bc-b-violet-10	border-bottom-color: rgb(55, 37, 97);
bc-b-violet-11	border-bottom-color: rgb(38, 25, 66);
bc-b-violet-12	border-bottom-color: rgb(20, 13, 35);
bc-b-pink-1	border-bottom-color: rgb(248, 225, 236);
bc-b-pink-2	border-bottom-color: rgb(242, 198, 220);
bc-b-pink-3	border-bottom-color: rgb(236, 171, 204);
bc-b-pink-4	border-bottom-color: rgb(230, 145, 187);
bc-b-pink-5	border-bottom-color: rgb(224, 118, 171);
bc-b-pink-6	border-bottom-color: rgb(218, 92, 154);
bc-b-pink	border-bottom-color: rgb(212, 65, 138);
bc-b-pink-7	border-bottom-color: rgb(182, 56, 119);
bc-b-pink-8	border-bottom-color: rgb(153, 47, 99);
bc-b-pink-9	border-bottom-color: rgb(123, 38, 80);
bc-b-pink-10	border-bottom-color: rgb(93, 29, 61);
bc-b-pink-11	border-bottom-color: rgb(64, 20, 41);
bc-b-pink-12	border-bottom-color: rgb(34, 10, 22);
bc-b-lead-1	border-bottom-color: rgb(224, 224, 227);
bc-b-lead-2	border-bottom-color: rgb(197, 197, 202);
bc-b-lead-3	border-bottom-color: rgb(171, 171, 177);
bc-b-lead-4	border-bottom-color: rgb(144, 144, 152);
bc-b-lead-5	border-bottom-color: rgb(117, 117, 128);
bc-b-lead-6	border-bottom-color: rgb(90, 90, 103);
bc-b-lead	border-bottom-color: rgb(63, 63, 78);
bc-b-lead-7	border-bottom-color: rgb(54, 54, 67);
bc-b-lead-8	border-bottom-color: rgb(45, 45, 56);
bc-b-lead-9	border-bottom-color: rgb(37, 37, 45);
bc-b-lead-10	border-bottom-color: rgb(28, 28, 34);
bc-b-lead-11	border-bottom-color: rgb(19, 19, 23);
bc-b-lead-12	border-bottom-color: rgb(10, 10, 12);
bc-b-gray-1	border-bottom-color: rgb(230, 231, 233);
bc-b-gray-2	border-bottom-color: rgb(207, 209, 213);
bc-b-gray-3	border-bottom-color: rgb(185, 188, 193);
bc-b-gray-4	border-bottom-color: rgb(163, 167, 174);
bc-b-gray-5	border-bottom-color: rgb(141, 146, 154);
bc-b-gray-6	border-bottom-color: rgb(118, 124, 135);
bc-b-gray	border-bottom-color: rgb(96, 103, 115);
bc-b-gray-7	border-bottom-color: rgb(83, 89, 99);
bc-b-gray-8	border-bottom-color: rgb(69, 74, 83);
bc-b-gray-9	border-bottom-color: rgb(56, 60, 67);
bc-b-gray-10	border-bottom-color: rgb(42, 45, 51);
bc-b-gray-11	border-bottom-color: rgb(29, 31, 35);
bc-b-gray-12	border-bottom-color: rgb(15, 16, 18);
bc-b-silver-1	border-bottom-color: rgb(245, 245, 246);
bc-b-silver-2	border-bottom-color: rgb(236, 237, 238);
bc-b-silver-3	border-bottom-color: rgb(227, 228, 230);
bc-b-silver-4	border-bottom-color: rgb(218, 220, 223);
bc-b-silver-5	border-bottom-color: rgb(209, 211, 215);
bc-b-silver-6	border-bottom-color: rgb(200, 203, 207);
bc-b-silver	border-bottom-color: rgb(191, 194, 199);
bc-b-silver-7	border-bottom-color: rgb(164, 167, 171);
bc-b-silver-8	border-bottom-color: rgb(138, 140, 143);
bc-b-silver-9	border-bottom-color: rgb(111, 113, 115);
bc-b-silver-10	border-bottom-color: rgb(84, 85, 88);
bc-b-silver-11	border-bottom-color: rgb(57, 58, 60);
bc-b-silver-12	border-bottom-color: rgb(31, 31, 32);
bc-b-black	border-bottom-color: black;
bc-b-white	border-bottom-color: white;
bc-b-transparent	border-bottom-color: transparent;

This example showcases various border bottom colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-b-indigo-3 d-16"></div>
  <div class="b-2 bc-b-indigo d-16"></div>
  <div class="b-2 bc-b-indigo-8 d-16"></div>
</div>

Border Left Color

Controls the color of the left border of an element.

Utility	Properties
bc-l-red-1	border-left-color: rgb(249, 224, 224);
bc-l-red-2	border-left-color: rgb(243, 197, 197);
bc-l-red-3	border-left-color: rgb(237, 170, 170);
bc-l-red-4	border-left-color: rgb(232, 142, 142);
bc-l-red-5	border-left-color: rgb(226, 115, 115);
bc-l-red-6	border-left-color: rgb(221, 88, 88);
bc-l-red	border-left-color: rgb(215, 61, 61);
bc-l-red-7	border-left-color: rgb(185, 52, 52);
bc-l-red-8	border-left-color: rgb(155, 44, 44);
bc-l-red-9	border-left-color: rgb(125, 35, 35);
bc-l-red-10	border-left-color: rgb(95, 27, 27);
bc-l-red-11	border-left-color: rgb(65, 18, 18);
bc-l-red-12	border-left-color: rgb(34, 10, 10);
bc-l-orange-1	border-left-color: rgb(250, 231, 217);
bc-l-orange-2	border-left-color: rgb(246, 210, 185);
bc-l-orange-3	border-left-color: rgb(241, 189, 152);
bc-l-orange-4	border-left-color: rgb(237, 167, 119);
bc-l-orange-5	border-left-color: rgb(233, 146, 86);
bc-l-orange-6	border-left-color: rgb(228, 125, 53);
bc-l-orange	border-left-color: rgb(224, 104, 20);
bc-l-orange-7	border-left-color: rgb(193, 89, 17);
bc-l-orange-8	border-left-color: rgb(161, 75, 14);
bc-l-orange-9	border-left-color: rgb(130, 60, 12);
bc-l-orange-10	border-left-color: rgb(99, 46, 9);
bc-l-orange-11	border-left-color: rgb(67, 31, 6);
bc-l-orange-12	border-left-color: rgb(36, 17, 3);
bc-l-yellow-1	border-left-color: rgb(248, 240, 215);
bc-l-yellow-2	border-left-color: rgb(242, 227, 181);
bc-l-yellow-3	border-left-color: rgb(236, 214, 146);
bc-l-yellow-4	border-left-color: rgb(229, 200, 111);
bc-l-yellow-5	border-left-color: rgb(223, 187, 76);
bc-l-yellow-6	border-left-color: rgb(217, 174, 42);
bc-l-yellow	border-left-color: rgb(211, 161, 7);
bc-l-yellow-7	border-left-color: rgb(181, 138, 6);
bc-l-yellow-8	border-left-color: rgb(152, 116, 5);
bc-l-yellow-9	border-left-color: rgb(122, 93, 4);
bc-l-yellow-10	border-left-color: rgb(93, 71, 3);
bc-l-yellow-11	border-left-color: rgb(63, 48, 2);
bc-l-yellow-12	border-left-color: rgb(34, 26, 1);
bc-l-green-1	border-left-color: rgb(219, 243, 228);
bc-l-green-2	border-left-color: rgb(188, 232, 204);
bc-l-green-3	border-left-color: rgb(156, 221, 180);
bc-l-green-4	border-left-color: rgb(125, 210, 156);
bc-l-green-5	border-left-color: rgb(94, 199, 133);
bc-l-green-6	border-left-color: rgb(62, 188, 109);
bc-l-green	border-left-color: rgb(31, 177, 85);
bc-l-green-7	border-left-color: rgb(27, 152, 73);
bc-l-green-8	border-left-color: rgb(22, 127, 61);
bc-l-green-9	border-left-color: rgb(18, 103, 49);
bc-l-green-10	border-left-color: rgb(14, 78, 37);
bc-l-green-11	border-left-color: rgb(9, 53, 26);
bc-l-green-12	border-left-color: rgb(5, 28, 14);
bc-l-teal-1	border-left-color: rgb(217, 241, 238);
bc-l-teal-2	border-left-color: rgb(184, 228, 223);
bc-l-teal-3	border-left-color: rgb(151, 216, 208);
bc-l-teal-4	border-left-color: rgb(118, 203, 194);
bc-l-teal-5	border-left-color: rgb(84, 191, 179);
bc-l-teal-6	border-left-color: rgb(51, 178, 164);
bc-l-teal	border-left-color: rgb(18, 166, 149);
bc-l-teal-7	border-left-color: rgb(15, 143, 128);
bc-l-teal-8	border-left-color: rgb(13, 120, 107);
bc-l-teal-9	border-left-color: rgb(10, 96, 86);
bc-l-teal-10	border-left-color: rgb(8, 73, 66);
bc-l-teal-11	border-left-color: rgb(5, 50, 45);
bc-l-teal-12	border-left-color: rgb(3, 27, 24);
bc-l-cyan-1	border-left-color: rgb(215, 240, 245);
bc-l-cyan-2	border-left-color: rgb(180, 228, 236);
bc-l-cyan-3	border-left-color: rgb(145, 215, 227);
bc-l-cyan-4	border-left-color: rgb(110, 202, 218);
bc-l-cyan-5	border-left-color: rgb(75, 189, 209);
bc-l-cyan-6	border-left-color: rgb(40, 177, 200);
bc-l-cyan	border-left-color: rgb(5, 164, 191);
bc-l-cyan-7	border-left-color: rgb(4, 141, 164);
bc-l-cyan-8	border-left-color: rgb(4, 118, 138);
bc-l-cyan-9	border-left-color: rgb(3, 95, 111);
bc-l-cyan-10	border-left-color: rgb(2, 72, 84);
bc-l-cyan-11	border-left-color: rgb(2, 49, 57);
bc-l-cyan-12	border-left-color: rgb(1, 26, 31);
bc-l-blue-1	border-left-color: rgb(223, 233, 250);
bc-l-blue-2	border-left-color: rgb(194, 214, 245);
bc-l-blue-3	border-left-color: rgb(166, 194, 240);
bc-l-blue-4	border-left-color: rgb(138, 175, 235);
bc-l-blue-5	border-left-color: rgb(110, 156, 231);
bc-l-blue-6	border-left-color: rgb(81, 136, 226);
bc-l-blue	border-left-color: rgb(53, 117, 221);
bc-l-blue-7	border-left-color: rgb(46, 101, 190);
bc-l-blue-8	border-left-color: rgb(38, 84, 159);
bc-l-blue-9	border-left-color: rgb(31, 68, 128);
bc-l-blue-10	border-left-color: rgb(23, 51, 97);
bc-l-blue-11	border-left-color: rgb(16, 35, 66);
bc-l-blue-12	border-left-color: rgb(8, 19, 35);
bc-l-indigo-1	border-left-color: rgb(228, 229, 249);
bc-l-indigo-2	border-left-color: rgb(205, 206, 244);
bc-l-indigo-3	border-left-color: rgb(182, 183, 238);
bc-l-indigo-4	border-left-color: rgb(159, 160, 233);
bc-l-indigo-5	border-left-color: rgb(135, 138, 228);
bc-l-indigo-6	border-left-color: rgb(112, 115, 222);
bc-l-indigo	border-left-color: rgb(89, 92, 217);
bc-l-indigo-7	border-left-color: rgb(77, 79, 187);
bc-l-indigo-8	border-left-color: rgb(64, 66, 156);
bc-l-indigo-9	border-left-color: rgb(52, 53, 126);
bc-l-indigo-10	border-left-color: rgb(39, 40, 95);
bc-l-indigo-11	border-left-color: rgb(27, 28, 65);
bc-l-indigo-12	border-left-color: rgb(14, 15, 35);
bc-l-violet-1	border-left-color: rgb(234, 227, 250);
bc-l-violet-2	border-left-color: rgb(216, 203, 245);
bc-l-violet-3	border-left-color: rgb(198, 179, 240);
bc-l-violet-4	border-left-color: rgb(180, 155, 235);
bc-l-violet-5	border-left-color: rgb(161, 131, 231);
bc-l-violet-6	border-left-color: rgb(143, 107, 226);
bc-l-violet	border-left-color: rgb(125, 83, 221);
bc-l-violet-7	border-left-color: rgb(108, 71, 190);
bc-l-violet-8	border-left-color: rgb(90, 60, 159);
bc-l-violet-9	border-left-color: rgb(73, 48, 128);
bc-l-violet-10	border-left-color: rgb(55, 37, 97);
bc-l-violet-11	border-left-color: rgb(38, 25, 66);
bc-l-violet-12	border-left-color: rgb(20, 13, 35);
bc-l-pink-1	border-left-color: rgb(248, 225, 236);
bc-l-pink-2	border-left-color: rgb(242, 198, 220);
bc-l-pink-3	border-left-color: rgb(236, 171, 204);
bc-l-pink-4	border-left-color: rgb(230, 145, 187);
bc-l-pink-5	border-left-color: rgb(224, 118, 171);
bc-l-pink-6	border-left-color: rgb(218, 92, 154);
bc-l-pink	border-left-color: rgb(212, 65, 138);
bc-l-pink-7	border-left-color: rgb(182, 56, 119);
bc-l-pink-8	border-left-color: rgb(153, 47, 99);
bc-l-pink-9	border-left-color: rgb(123, 38, 80);
bc-l-pink-10	border-left-color: rgb(93, 29, 61);
bc-l-pink-11	border-left-color: rgb(64, 20, 41);
bc-l-pink-12	border-left-color: rgb(34, 10, 22);
bc-l-lead-1	border-left-color: rgb(224, 224, 227);
bc-l-lead-2	border-left-color: rgb(197, 197, 202);
bc-l-lead-3	border-left-color: rgb(171, 171, 177);
bc-l-lead-4	border-left-color: rgb(144, 144, 152);
bc-l-lead-5	border-left-color: rgb(117, 117, 128);
bc-l-lead-6	border-left-color: rgb(90, 90, 103);
bc-l-lead	border-left-color: rgb(63, 63, 78);
bc-l-lead-7	border-left-color: rgb(54, 54, 67);
bc-l-lead-8	border-left-color: rgb(45, 45, 56);
bc-l-lead-9	border-left-color: rgb(37, 37, 45);
bc-l-lead-10	border-left-color: rgb(28, 28, 34);
bc-l-lead-11	border-left-color: rgb(19, 19, 23);
bc-l-lead-12	border-left-color: rgb(10, 10, 12);
bc-l-gray-1	border-left-color: rgb(230, 231, 233);
bc-l-gray-2	border-left-color: rgb(207, 209, 213);
bc-l-gray-3	border-left-color: rgb(185, 188, 193);
bc-l-gray-4	border-left-color: rgb(163, 167, 174);
bc-l-gray-5	border-left-color: rgb(141, 146, 154);
bc-l-gray-6	border-left-color: rgb(118, 124, 135);
bc-l-gray	border-left-color: rgb(96, 103, 115);
bc-l-gray-7	border-left-color: rgb(83, 89, 99);
bc-l-gray-8	border-left-color: rgb(69, 74, 83);
bc-l-gray-9	border-left-color: rgb(56, 60, 67);
bc-l-gray-10	border-left-color: rgb(42, 45, 51);
bc-l-gray-11	border-left-color: rgb(29, 31, 35);
bc-l-gray-12	border-left-color: rgb(15, 16, 18);
bc-l-silver-1	border-left-color: rgb(245, 245, 246);
bc-l-silver-2	border-left-color: rgb(236, 237, 238);
bc-l-silver-3	border-left-color: rgb(227, 228, 230);
bc-l-silver-4	border-left-color: rgb(218, 220, 223);
bc-l-silver-5	border-left-color: rgb(209, 211, 215);
bc-l-silver-6	border-left-color: rgb(200, 203, 207);
bc-l-silver	border-left-color: rgb(191, 194, 199);
bc-l-silver-7	border-left-color: rgb(164, 167, 171);
bc-l-silver-8	border-left-color: rgb(138, 140, 143);
bc-l-silver-9	border-left-color: rgb(111, 113, 115);
bc-l-silver-10	border-left-color: rgb(84, 85, 88);
bc-l-silver-11	border-left-color: rgb(57, 58, 60);
bc-l-silver-12	border-left-color: rgb(31, 31, 32);
bc-l-black	border-left-color: black;
bc-l-white	border-left-color: white;
bc-l-transparent	border-left-color: transparent;

This example showcases various border left colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-indigo-3 d-16"></div>
  <div class="b-2 bc-indigo d-16"></div>
  <div class="b-2 bc-indigo-8 d-16"></div>
</div>

Border Right Color

Controls the color of the right border of an element.

Class name=“border-right-color” />

This example showcases various border right colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-r-indigo-3 d-16"></div>
  <div class="b-2 bc-r-indigo d-16"></div>
  <div class="b-2 bc-r-indigo-8 d-16"></div>
</div>

Border Top Color

Controls the color of the top border of an element.

Utility	Properties
bc-t-red-1	border-top-color: rgb(249, 224, 224);
bc-t-red-2	border-top-color: rgb(243, 197, 197);
bc-t-red-3	border-top-color: rgb(237, 170, 170);
bc-t-red-4	border-top-color: rgb(232, 142, 142);
bc-t-red-5	border-top-color: rgb(226, 115, 115);
bc-t-red-6	border-top-color: rgb(221, 88, 88);
bc-t-red	border-top-color: rgb(215, 61, 61);
bc-t-red-7	border-top-color: rgb(185, 52, 52);
bc-t-red-8	border-top-color: rgb(155, 44, 44);
bc-t-red-9	border-top-color: rgb(125, 35, 35);
bc-t-red-10	border-top-color: rgb(95, 27, 27);
bc-t-red-11	border-top-color: rgb(65, 18, 18);
bc-t-red-12	border-top-color: rgb(34, 10, 10);
bc-t-orange-1	border-top-color: rgb(250, 231, 217);
bc-t-orange-2	border-top-color: rgb(246, 210, 185);
bc-t-orange-3	border-top-color: rgb(241, 189, 152);
bc-t-orange-4	border-top-color: rgb(237, 167, 119);
bc-t-orange-5	border-top-color: rgb(233, 146, 86);
bc-t-orange-6	border-top-color: rgb(228, 125, 53);
bc-t-orange	border-top-color: rgb(224, 104, 20);
bc-t-orange-7	border-top-color: rgb(193, 89, 17);
bc-t-orange-8	border-top-color: rgb(161, 75, 14);
bc-t-orange-9	border-top-color: rgb(130, 60, 12);
bc-t-orange-10	border-top-color: rgb(99, 46, 9);
bc-t-orange-11	border-top-color: rgb(67, 31, 6);
bc-t-orange-12	border-top-color: rgb(36, 17, 3);
bc-t-yellow-1	border-top-color: rgb(248, 240, 215);
bc-t-yellow-2	border-top-color: rgb(242, 227, 181);
bc-t-yellow-3	border-top-color: rgb(236, 214, 146);
bc-t-yellow-4	border-top-color: rgb(229, 200, 111);
bc-t-yellow-5	border-top-color: rgb(223, 187, 76);
bc-t-yellow-6	border-top-color: rgb(217, 174, 42);
bc-t-yellow	border-top-color: rgb(211, 161, 7);
bc-t-yellow-7	border-top-color: rgb(181, 138, 6);
bc-t-yellow-8	border-top-color: rgb(152, 116, 5);
bc-t-yellow-9	border-top-color: rgb(122, 93, 4);
bc-t-yellow-10	border-top-color: rgb(93, 71, 3);
bc-t-yellow-11	border-top-color: rgb(63, 48, 2);
bc-t-yellow-12	border-top-color: rgb(34, 26, 1);
bc-t-green-1	border-top-color: rgb(219, 243, 228);
bc-t-green-2	border-top-color: rgb(188, 232, 204);
bc-t-green-3	border-top-color: rgb(156, 221, 180);
bc-t-green-4	border-top-color: rgb(125, 210, 156);
bc-t-green-5	border-top-color: rgb(94, 199, 133);
bc-t-green-6	border-top-color: rgb(62, 188, 109);
bc-t-green	border-top-color: rgb(31, 177, 85);
bc-t-green-7	border-top-color: rgb(27, 152, 73);
bc-t-green-8	border-top-color: rgb(22, 127, 61);
bc-t-green-9	border-top-color: rgb(18, 103, 49);
bc-t-green-10	border-top-color: rgb(14, 78, 37);
bc-t-green-11	border-top-color: rgb(9, 53, 26);
bc-t-green-12	border-top-color: rgb(5, 28, 14);
bc-t-teal-1	border-top-color: rgb(217, 241, 238);
bc-t-teal-2	border-top-color: rgb(184, 228, 223);
bc-t-teal-3	border-top-color: rgb(151, 216, 208);
bc-t-teal-4	border-top-color: rgb(118, 203, 194);
bc-t-teal-5	border-top-color: rgb(84, 191, 179);
bc-t-teal-6	border-top-color: rgb(51, 178, 164);
bc-t-teal	border-top-color: rgb(18, 166, 149);
bc-t-teal-7	border-top-color: rgb(15, 143, 128);
bc-t-teal-8	border-top-color: rgb(13, 120, 107);
bc-t-teal-9	border-top-color: rgb(10, 96, 86);
bc-t-teal-10	border-top-color: rgb(8, 73, 66);
bc-t-teal-11	border-top-color: rgb(5, 50, 45);
bc-t-teal-12	border-top-color: rgb(3, 27, 24);
bc-t-cyan-1	border-top-color: rgb(215, 240, 245);
bc-t-cyan-2	border-top-color: rgb(180, 228, 236);
bc-t-cyan-3	border-top-color: rgb(145, 215, 227);
bc-t-cyan-4	border-top-color: rgb(110, 202, 218);
bc-t-cyan-5	border-top-color: rgb(75, 189, 209);
bc-t-cyan-6	border-top-color: rgb(40, 177, 200);
bc-t-cyan	border-top-color: rgb(5, 164, 191);
bc-t-cyan-7	border-top-color: rgb(4, 141, 164);
bc-t-cyan-8	border-top-color: rgb(4, 118, 138);
bc-t-cyan-9	border-top-color: rgb(3, 95, 111);
bc-t-cyan-10	border-top-color: rgb(2, 72, 84);
bc-t-cyan-11	border-top-color: rgb(2, 49, 57);
bc-t-cyan-12	border-top-color: rgb(1, 26, 31);
bc-t-blue-1	border-top-color: rgb(223, 233, 250);
bc-t-blue-2	border-top-color: rgb(194, 214, 245);
bc-t-blue-3	border-top-color: rgb(166, 194, 240);
bc-t-blue-4	border-top-color: rgb(138, 175, 235);
bc-t-blue-5	border-top-color: rgb(110, 156, 231);
bc-t-blue-6	border-top-color: rgb(81, 136, 226);
bc-t-blue	border-top-color: rgb(53, 117, 221);
bc-t-blue-7	border-top-color: rgb(46, 101, 190);
bc-t-blue-8	border-top-color: rgb(38, 84, 159);
bc-t-blue-9	border-top-color: rgb(31, 68, 128);
bc-t-blue-10	border-top-color: rgb(23, 51, 97);
bc-t-blue-11	border-top-color: rgb(16, 35, 66);
bc-t-blue-12	border-top-color: rgb(8, 19, 35);
bc-t-indigo-1	border-top-color: rgb(228, 229, 249);
bc-t-indigo-2	border-top-color: rgb(205, 206, 244);
bc-t-indigo-3	border-top-color: rgb(182, 183, 238);
bc-t-indigo-4	border-top-color: rgb(159, 160, 233);
bc-t-indigo-5	border-top-color: rgb(135, 138, 228);
bc-t-indigo-6	border-top-color: rgb(112, 115, 222);
bc-t-indigo	border-top-color: rgb(89, 92, 217);
bc-t-indigo-7	border-top-color: rgb(77, 79, 187);
bc-t-indigo-8	border-top-color: rgb(64, 66, 156);
bc-t-indigo-9	border-top-color: rgb(52, 53, 126);
bc-t-indigo-10	border-top-color: rgb(39, 40, 95);
bc-t-indigo-11	border-top-color: rgb(27, 28, 65);
bc-t-indigo-12	border-top-color: rgb(14, 15, 35);
bc-t-violet-1	border-top-color: rgb(234, 227, 250);
bc-t-violet-2	border-top-color: rgb(216, 203, 245);
bc-t-violet-3	border-top-color: rgb(198, 179, 240);
bc-t-violet-4	border-top-color: rgb(180, 155, 235);
bc-t-violet-5	border-top-color: rgb(161, 131, 231);
bc-t-violet-6	border-top-color: rgb(143, 107, 226);
bc-t-violet	border-top-color: rgb(125, 83, 221);
bc-t-violet-7	border-top-color: rgb(108, 71, 190);
bc-t-violet-8	border-top-color: rgb(90, 60, 159);
bc-t-violet-9	border-top-color: rgb(73, 48, 128);
bc-t-violet-10	border-top-color: rgb(55, 37, 97);
bc-t-violet-11	border-top-color: rgb(38, 25, 66);
bc-t-violet-12	border-top-color: rgb(20, 13, 35);
bc-t-pink-1	border-top-color: rgb(248, 225, 236);
bc-t-pink-2	border-top-color: rgb(242, 198, 220);
bc-t-pink-3	border-top-color: rgb(236, 171, 204);
bc-t-pink-4	border-top-color: rgb(230, 145, 187);
bc-t-pink-5	border-top-color: rgb(224, 118, 171);
bc-t-pink-6	border-top-color: rgb(218, 92, 154);
bc-t-pink	border-top-color: rgb(212, 65, 138);
bc-t-pink-7	border-top-color: rgb(182, 56, 119);
bc-t-pink-8	border-top-color: rgb(153, 47, 99);
bc-t-pink-9	border-top-color: rgb(123, 38, 80);
bc-t-pink-10	border-top-color: rgb(93, 29, 61);
bc-t-pink-11	border-top-color: rgb(64, 20, 41);
bc-t-pink-12	border-top-color: rgb(34, 10, 22);
bc-t-lead-1	border-top-color: rgb(224, 224, 227);
bc-t-lead-2	border-top-color: rgb(197, 197, 202);
bc-t-lead-3	border-top-color: rgb(171, 171, 177);
bc-t-lead-4	border-top-color: rgb(144, 144, 152);
bc-t-lead-5	border-top-color: rgb(117, 117, 128);
bc-t-lead-6	border-top-color: rgb(90, 90, 103);
bc-t-lead	border-top-color: rgb(63, 63, 78);
bc-t-lead-7	border-top-color: rgb(54, 54, 67);
bc-t-lead-8	border-top-color: rgb(45, 45, 56);
bc-t-lead-9	border-top-color: rgb(37, 37, 45);
bc-t-lead-10	border-top-color: rgb(28, 28, 34);
bc-t-lead-11	border-top-color: rgb(19, 19, 23);
bc-t-lead-12	border-top-color: rgb(10, 10, 12);
bc-t-gray-1	border-top-color: rgb(230, 231, 233);
bc-t-gray-2	border-top-color: rgb(207, 209, 213);
bc-t-gray-3	border-top-color: rgb(185, 188, 193);
bc-t-gray-4	border-top-color: rgb(163, 167, 174);
bc-t-gray-5	border-top-color: rgb(141, 146, 154);
bc-t-gray-6	border-top-color: rgb(118, 124, 135);
bc-t-gray	border-top-color: rgb(96, 103, 115);
bc-t-gray-7	border-top-color: rgb(83, 89, 99);
bc-t-gray-8	border-top-color: rgb(69, 74, 83);
bc-t-gray-9	border-top-color: rgb(56, 60, 67);
bc-t-gray-10	border-top-color: rgb(42, 45, 51);
bc-t-gray-11	border-top-color: rgb(29, 31, 35);
bc-t-gray-12	border-top-color: rgb(15, 16, 18);
bc-t-silver-1	border-top-color: rgb(245, 245, 246);
bc-t-silver-2	border-top-color: rgb(236, 237, 238);
bc-t-silver-3	border-top-color: rgb(227, 228, 230);
bc-t-silver-4	border-top-color: rgb(218, 220, 223);
bc-t-silver-5	border-top-color: rgb(209, 211, 215);
bc-t-silver-6	border-top-color: rgb(200, 203, 207);
bc-t-silver	border-top-color: rgb(191, 194, 199);
bc-t-silver-7	border-top-color: rgb(164, 167, 171);
bc-t-silver-8	border-top-color: rgb(138, 140, 143);
bc-t-silver-9	border-top-color: rgb(111, 113, 115);
bc-t-silver-10	border-top-color: rgb(84, 85, 88);
bc-t-silver-11	border-top-color: rgb(57, 58, 60);
bc-t-silver-12	border-top-color: rgb(31, 31, 32);
bc-t-black	border-top-color: black;
bc-t-white	border-top-color: white;
bc-t-transparent	border-top-color: transparent;

This example showcases various border top colors using the indigo color palette:

• The bc-indigo-3 utility applies a lighter indigo shade.
• The bc-indigo utility applies the base indigo shade.
• The bc-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="b-2 bc-t-indigo-3 d-16"></div>
  <div class="b-2 bc-t-indigo d-16"></div>
  <div class="b-2 bc-t-indigo-8 d-16"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

Alternatively, you can apply :hover by using h:bc-* utility to override elements and change their values when hovering over them.

<div class="bc-lead h:bc-indigo ..."></div>