Border Color
Controls the color of the borders of an element.
| Class | Style |
|---|---|
bc-red-1 | border-color: #f9e0e0; |
bc-red-2 | border-color: #f3c5c5; |
bc-red-3 | border-color: #edaaaa; |
bc-red-4 | border-color: #e88e8e; |
bc-red-5 | border-color: #e27373; |
bc-red-6 | border-color: #dd5858; |
bc-red | border-color: #d73d3d; |
bc-red-7 | border-color: #b93434; |
bc-red-8 | border-color: #9b2c2c; |
bc-red-9 | border-color: #7d2323; |
bc-red-10 | border-color: #5f1b1b; |
bc-red-11 | border-color: #411212; |
bc-red-12 | border-color: #220a0a; |
bc-orange-1 | border-color: #fae7d9; |
bc-orange-2 | border-color: #f6d2b9; |
bc-orange-3 | border-color: #f1bd98; |
bc-orange-4 | border-color: #eda777; |
bc-orange-5 | border-color: #e99256; |
bc-orange-6 | border-color: #e47d35; |
bc-orange | border-color: #e06814; |
bc-orange-7 | border-color: #c15911; |
bc-orange-8 | border-color: #a14b0e; |
bc-orange-9 | border-color: #823c0c; |
bc-orange-10 | border-color: #632e09; |
bc-orange-11 | border-color: #431f06; |
bc-orange-12 | border-color: #241103; |
bc-yellow-1 | border-color: #f8f0d7; |
bc-yellow-2 | border-color: #f2e3b5; |
bc-yellow-3 | border-color: #ecd692; |
bc-yellow-4 | border-color: #e5c86f; |
bc-yellow-5 | border-color: #dfbb4c; |
bc-yellow-6 | border-color: #d9ae2a; |
bc-yellow | border-color: #d3a107; |
bc-yellow-7 | border-color: #b58a06; |
bc-yellow-8 | border-color: #987405; |
bc-yellow-9 | border-color: #7a5d04; |
bc-yellow-10 | border-color: #5d4703; |
bc-yellow-11 | border-color: #3f3002; |
bc-yellow-12 | border-color: #221a01; |
bc-green-1 | border-color: #dbf3e4; |
bc-green-2 | border-color: #bce8cc; |
bc-green-3 | border-color: #9cddb4; |
bc-green-4 | border-color: #7dd29c; |
bc-green-5 | border-color: #5ec785; |
bc-green-6 | border-color: #3ebc6d; |
bc-green | border-color: #1fb155; |
bc-green-7 | border-color: #1b9849; |
bc-green-8 | border-color: #167f3d; |
bc-green-9 | border-color: #126731; |
bc-green-10 | border-color: #0e4e25; |
bc-green-11 | border-color: #09351a; |
bc-green-12 | border-color: #051c0e; |
bc-teal-1 | border-color: #d9f1ee; |
bc-teal-2 | border-color: #b8e4df; |
bc-teal-3 | border-color: #97d8d0; |
bc-teal-4 | border-color: #76cbc2; |
bc-teal-5 | border-color: #54bfb3; |
bc-teal-6 | border-color: #33b2a4; |
bc-teal | border-color: #12a695; |
bc-teal-7 | border-color: #0f8f80; |
bc-teal-8 | border-color: #0d786b; |
bc-teal-9 | border-color: #0a6056; |
bc-teal-10 | border-color: #084942; |
bc-teal-11 | border-color: #05322d; |
bc-teal-12 | border-color: #031b18; |
bc-cyan-1 | border-color: #d7f0f5; |
bc-cyan-2 | border-color: #b4e4ec; |
bc-cyan-3 | border-color: #91d7e3; |
bc-cyan-4 | border-color: #6ecada; |
bc-cyan-5 | border-color: #4bbdd1; |
bc-cyan-6 | border-color: #28b1c8; |
bc-cyan | border-color: #05a4bf; |
bc-cyan-7 | border-color: #048da4; |
bc-cyan-8 | border-color: #04768a; |
bc-cyan-9 | border-color: #035f6f; |
bc-cyan-10 | border-color: #024854; |
bc-cyan-11 | border-color: #023139; |
bc-cyan-12 | border-color: #011a1f; |
bc-blue-1 | border-color: #dfe9fa; |
bc-blue-2 | border-color: #c2d6f5; |
bc-blue-3 | border-color: #a6c2f0; |
bc-blue-4 | border-color: #8aafeb; |
bc-blue-5 | border-color: #6e9ce7; |
bc-blue-6 | border-color: #5188e2; |
bc-blue | border-color: #3575dd; |
bc-blue-7 | border-color: #2e65be; |
bc-blue-8 | border-color: #26549f; |
bc-blue-9 | border-color: #1f4480; |
bc-blue-10 | border-color: #173361; |
bc-blue-11 | border-color: #102342; |
bc-blue-12 | border-color: #081323; |
bc-indigo-1 | border-color: #e4e5f9; |
bc-indigo-2 | border-color: #cdcef4; |
bc-indigo-3 | border-color: #b6b7ee; |
bc-indigo-4 | border-color: #9fa0e9; |
bc-indigo-5 | border-color: #878ae4; |
bc-indigo-6 | border-color: #7073de; |
bc-indigo | border-color: #595cd9; |
bc-indigo-7 | border-color: #4d4fbb; |
bc-indigo-8 | border-color: #40429c; |
bc-indigo-9 | border-color: #34357e; |
bc-indigo-10 | border-color: #27285f; |
bc-indigo-11 | border-color: #1b1c41; |
bc-indigo-12 | border-color: #0e0f23; |
bc-violet-1 | border-color: #eae3fa; |
bc-violet-2 | border-color: #d8cbf5; |
bc-violet-3 | border-color: #c6b3f0; |
bc-violet-4 | border-color: #b49beb; |
bc-violet-5 | border-color: #a183e7; |
bc-violet-6 | border-color: #8f6be2; |
bc-violet | border-color: #7d53dd; |
bc-violet-7 | border-color: #6c47be; |
bc-violet-8 | border-color: #5a3c9f; |
bc-violet-9 | border-color: #493080; |
bc-violet-10 | border-color: #372561; |
bc-violet-11 | border-color: #261942; |
bc-violet-12 | border-color: #140d23; |
bc-pink-1 | border-color: #f8e1ec; |
bc-pink-2 | border-color: #f2c6dc; |
bc-pink-3 | border-color: #ecabcc; |
bc-pink-4 | border-color: #e691bb; |
bc-pink-5 | border-color: #e076ab; |
bc-pink-6 | border-color: #da5c9a; |
bc-pink | border-color: #d4418a; |
bc-pink-7 | border-color: #b63877; |
bc-pink-8 | border-color: #992f63; |
bc-pink-9 | border-color: #7b2650; |
bc-pink-10 | border-color: #5d1d3d; |
bc-pink-11 | border-color: #401429; |
bc-pink-12 | border-color: #220a16; |
bc-slate-1 | border-color: #e0e0e3; |
bc-slate-2 | border-color: #c5c5ca; |
bc-slate-3 | border-color: #ababb1; |
bc-slate-4 | border-color: #909098; |
bc-slate-5 | border-color: #757580; |
bc-slate-6 | border-color: #5a5a67; |
bc-slate | border-color: #3f3f4e; |
bc-slate-7 | border-color: #363643; |
bc-slate-8 | border-color: #2d2d38; |
bc-slate-9 | border-color: #25252d; |
bc-slate-10 | border-color: #1c1c22; |
bc-slate-11 | border-color: #131317; |
bc-slate-12 | border-color: #0a0a0c; |
bc-gray-1 | border-color: #e6e7e9; |
bc-gray-2 | border-color: #cfd1d5; |
bc-gray-3 | border-color: #b9bcc1; |
bc-gray-4 | border-color: #a3a7ae; |
bc-gray-5 | border-color: #8d929a; |
bc-gray-6 | border-color: #767c87; |
bc-gray | border-color: #606773; |
bc-gray-7 | border-color: #535963; |
bc-gray-8 | border-color: #454a53; |
bc-gray-9 | border-color: #383c43; |
bc-gray-10 | border-color: #2a2d33; |
bc-gray-11 | border-color: #1d1f23; |
bc-gray-12 | border-color: #0f1012; |
bc-silver-1 | border-color: #f5f5f6; |
bc-silver-2 | border-color: #ecedee; |
bc-silver-3 | border-color: #e3e4e6; |
bc-silver-4 | border-color: #dadcdf; |
bc-silver-5 | border-color: #d1d3d7; |
bc-silver-6 | border-color: #c8cbcf; |
bc-silver | border-color: #bfc2c7; |
bc-silver-7 | border-color: #a4a7ab; |
bc-silver-8 | border-color: #8a8c8f; |
bc-silver-9 | border-color: #6f7173; |
bc-silver-10 | border-color: #545558; |
bc-silver-11 | border-color: #393a3c; |
bc-silver-12 | border-color: #1f1f20; |
bc-black | border-color: #000000; |
bc-current | border-color: currentColor; |
bc-transparent | border-color: transparent; |
bc-white | border-color: #ffffff; |
This example showcases various border-color utilities 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.
| Class | Style |
|---|---|
bc-b-red-1 | border-bottom-color: #f9e0e0; |
bc-b-red-2 | border-bottom-color: #f3c5c5; |
bc-b-red-3 | border-bottom-color: #edaaaa; |
bc-b-red-4 | border-bottom-color: #e88e8e; |
bc-b-red-5 | border-bottom-color: #e27373; |
bc-b-red-6 | border-bottom-color: #dd5858; |
bc-b-red | border-bottom-color: #d73d3d; |
bc-b-red-7 | border-bottom-color: #b93434; |
bc-b-red-8 | border-bottom-color: #9b2c2c; |
bc-b-red-9 | border-bottom-color: #7d2323; |
bc-b-red-10 | border-bottom-color: #5f1b1b; |
bc-b-red-11 | border-bottom-color: #411212; |
bc-b-red-12 | border-bottom-color: #220a0a; |
bc-b-orange-1 | border-bottom-color: #fae7d9; |
bc-b-orange-2 | border-bottom-color: #f6d2b9; |
bc-b-orange-3 | border-bottom-color: #f1bd98; |
bc-b-orange-4 | border-bottom-color: #eda777; |
bc-b-orange-5 | border-bottom-color: #e99256; |
bc-b-orange-6 | border-bottom-color: #e47d35; |
bc-b-orange | border-bottom-color: #e06814; |
bc-b-orange-7 | border-bottom-color: #c15911; |
bc-b-orange-8 | border-bottom-color: #a14b0e; |
bc-b-orange-9 | border-bottom-color: #823c0c; |
bc-b-orange-10 | border-bottom-color: #632e09; |
bc-b-orange-11 | border-bottom-color: #431f06; |
bc-b-orange-12 | border-bottom-color: #241103; |
bc-b-yellow-1 | border-bottom-color: #f8f0d7; |
bc-b-yellow-2 | border-bottom-color: #f2e3b5; |
bc-b-yellow-3 | border-bottom-color: #ecd692; |
bc-b-yellow-4 | border-bottom-color: #e5c86f; |
bc-b-yellow-5 | border-bottom-color: #dfbb4c; |
bc-b-yellow-6 | border-bottom-color: #d9ae2a; |
bc-b-yellow | border-bottom-color: #d3a107; |
bc-b-yellow-7 | border-bottom-color: #b58a06; |
bc-b-yellow-8 | border-bottom-color: #987405; |
bc-b-yellow-9 | border-bottom-color: #7a5d04; |
bc-b-yellow-10 | border-bottom-color: #5d4703; |
bc-b-yellow-11 | border-bottom-color: #3f3002; |
bc-b-yellow-12 | border-bottom-color: #221a01; |
bc-b-green-1 | border-bottom-color: #dbf3e4; |
bc-b-green-2 | border-bottom-color: #bce8cc; |
bc-b-green-3 | border-bottom-color: #9cddb4; |
bc-b-green-4 | border-bottom-color: #7dd29c; |
bc-b-green-5 | border-bottom-color: #5ec785; |
bc-b-green-6 | border-bottom-color: #3ebc6d; |
bc-b-green | border-bottom-color: #1fb155; |
bc-b-green-7 | border-bottom-color: #1b9849; |
bc-b-green-8 | border-bottom-color: #167f3d; |
bc-b-green-9 | border-bottom-color: #126731; |
bc-b-green-10 | border-bottom-color: #0e4e25; |
bc-b-green-11 | border-bottom-color: #09351a; |
bc-b-green-12 | border-bottom-color: #051c0e; |
bc-b-teal-1 | border-bottom-color: #d9f1ee; |
bc-b-teal-2 | border-bottom-color: #b8e4df; |
bc-b-teal-3 | border-bottom-color: #97d8d0; |
bc-b-teal-4 | border-bottom-color: #76cbc2; |
bc-b-teal-5 | border-bottom-color: #54bfb3; |
bc-b-teal-6 | border-bottom-color: #33b2a4; |
bc-b-teal | border-bottom-color: #12a695; |
bc-b-teal-7 | border-bottom-color: #0f8f80; |
bc-b-teal-8 | border-bottom-color: #0d786b; |
bc-b-teal-9 | border-bottom-color: #0a6056; |
bc-b-teal-10 | border-bottom-color: #084942; |
bc-b-teal-11 | border-bottom-color: #05322d; |
bc-b-teal-12 | border-bottom-color: #031b18; |
bc-b-cyan-1 | border-bottom-color: #d7f0f5; |
bc-b-cyan-2 | border-bottom-color: #b4e4ec; |
bc-b-cyan-3 | border-bottom-color: #91d7e3; |
bc-b-cyan-4 | border-bottom-color: #6ecada; |
bc-b-cyan-5 | border-bottom-color: #4bbdd1; |
bc-b-cyan-6 | border-bottom-color: #28b1c8; |
bc-b-cyan | border-bottom-color: #05a4bf; |
bc-b-cyan-7 | border-bottom-color: #048da4; |
bc-b-cyan-8 | border-bottom-color: #04768a; |
bc-b-cyan-9 | border-bottom-color: #035f6f; |
bc-b-cyan-10 | border-bottom-color: #024854; |
bc-b-cyan-11 | border-bottom-color: #023139; |
bc-b-cyan-12 | border-bottom-color: #011a1f; |
bc-b-blue-1 | border-bottom-color: #dfe9fa; |
bc-b-blue-2 | border-bottom-color: #c2d6f5; |
bc-b-blue-3 | border-bottom-color: #a6c2f0; |
bc-b-blue-4 | border-bottom-color: #8aafeb; |
bc-b-blue-5 | border-bottom-color: #6e9ce7; |
bc-b-blue-6 | border-bottom-color: #5188e2; |
bc-b-blue | border-bottom-color: #3575dd; |
bc-b-blue-7 | border-bottom-color: #2e65be; |
bc-b-blue-8 | border-bottom-color: #26549f; |
bc-b-blue-9 | border-bottom-color: #1f4480; |
bc-b-blue-10 | border-bottom-color: #173361; |
bc-b-blue-11 | border-bottom-color: #102342; |
bc-b-blue-12 | border-bottom-color: #081323; |
bc-b-indigo-1 | border-bottom-color: #e4e5f9; |
bc-b-indigo-2 | border-bottom-color: #cdcef4; |
bc-b-indigo-3 | border-bottom-color: #b6b7ee; |
bc-b-indigo-4 | border-bottom-color: #9fa0e9; |
bc-b-indigo-5 | border-bottom-color: #878ae4; |
bc-b-indigo-6 | border-bottom-color: #7073de; |
bc-b-indigo | border-bottom-color: #595cd9; |
bc-b-indigo-7 | border-bottom-color: #4d4fbb; |
bc-b-indigo-8 | border-bottom-color: #40429c; |
bc-b-indigo-9 | border-bottom-color: #34357e; |
bc-b-indigo-10 | border-bottom-color: #27285f; |
bc-b-indigo-11 | border-bottom-color: #1b1c41; |
bc-b-indigo-12 | border-bottom-color: #0e0f23; |
bc-b-violet-1 | border-bottom-color: #eae3fa; |
bc-b-violet-2 | border-bottom-color: #d8cbf5; |
bc-b-violet-3 | border-bottom-color: #c6b3f0; |
bc-b-violet-4 | border-bottom-color: #b49beb; |
bc-b-violet-5 | border-bottom-color: #a183e7; |
bc-b-violet-6 | border-bottom-color: #8f6be2; |
bc-b-violet | border-bottom-color: #7d53dd; |
bc-b-violet-7 | border-bottom-color: #6c47be; |
bc-b-violet-8 | border-bottom-color: #5a3c9f; |
bc-b-violet-9 | border-bottom-color: #493080; |
bc-b-violet-10 | border-bottom-color: #372561; |
bc-b-violet-11 | border-bottom-color: #261942; |
bc-b-violet-12 | border-bottom-color: #140d23; |
bc-b-pink-1 | border-bottom-color: #f8e1ec; |
bc-b-pink-2 | border-bottom-color: #f2c6dc; |
bc-b-pink-3 | border-bottom-color: #ecabcc; |
bc-b-pink-4 | border-bottom-color: #e691bb; |
bc-b-pink-5 | border-bottom-color: #e076ab; |
bc-b-pink-6 | border-bottom-color: #da5c9a; |
bc-b-pink | border-bottom-color: #d4418a; |
bc-b-pink-7 | border-bottom-color: #b63877; |
bc-b-pink-8 | border-bottom-color: #992f63; |
bc-b-pink-9 | border-bottom-color: #7b2650; |
bc-b-pink-10 | border-bottom-color: #5d1d3d; |
bc-b-pink-11 | border-bottom-color: #401429; |
bc-b-pink-12 | border-bottom-color: #220a16; |
bc-b-slate-1 | border-bottom-color: #e0e0e3; |
bc-b-slate-2 | border-bottom-color: #c5c5ca; |
bc-b-slate-3 | border-bottom-color: #ababb1; |
bc-b-slate-4 | border-bottom-color: #909098; |
bc-b-slate-5 | border-bottom-color: #757580; |
bc-b-slate-6 | border-bottom-color: #5a5a67; |
bc-b-slate | border-bottom-color: #3f3f4e; |
bc-b-slate-7 | border-bottom-color: #363643; |
bc-b-slate-8 | border-bottom-color: #2d2d38; |
bc-b-slate-9 | border-bottom-color: #25252d; |
bc-b-slate-10 | border-bottom-color: #1c1c22; |
bc-b-slate-11 | border-bottom-color: #131317; |
bc-b-slate-12 | border-bottom-color: #0a0a0c; |
bc-b-gray-1 | border-bottom-color: #e6e7e9; |
bc-b-gray-2 | border-bottom-color: #cfd1d5; |
bc-b-gray-3 | border-bottom-color: #b9bcc1; |
bc-b-gray-4 | border-bottom-color: #a3a7ae; |
bc-b-gray-5 | border-bottom-color: #8d929a; |
bc-b-gray-6 | border-bottom-color: #767c87; |
bc-b-gray | border-bottom-color: #606773; |
bc-b-gray-7 | border-bottom-color: #535963; |
bc-b-gray-8 | border-bottom-color: #454a53; |
bc-b-gray-9 | border-bottom-color: #383c43; |
bc-b-gray-10 | border-bottom-color: #2a2d33; |
bc-b-gray-11 | border-bottom-color: #1d1f23; |
bc-b-gray-12 | border-bottom-color: #0f1012; |
bc-b-silver-1 | border-bottom-color: #f5f5f6; |
bc-b-silver-2 | border-bottom-color: #ecedee; |
bc-b-silver-3 | border-bottom-color: #e3e4e6; |
bc-b-silver-4 | border-bottom-color: #dadcdf; |
bc-b-silver-5 | border-bottom-color: #d1d3d7; |
bc-b-silver-6 | border-bottom-color: #c8cbcf; |
bc-b-silver | border-bottom-color: #bfc2c7; |
bc-b-silver-7 | border-bottom-color: #a4a7ab; |
bc-b-silver-8 | border-bottom-color: #8a8c8f; |
bc-b-silver-9 | border-bottom-color: #6f7173; |
bc-b-silver-10 | border-bottom-color: #545558; |
bc-b-silver-11 | border-bottom-color: #393a3c; |
bc-b-silver-12 | border-bottom-color: #1f1f20; |
bc-b-black | border-bottom-color: #000000; |
bc-b-current | border-bottom-color: currentColor; |
bc-b-transparent | border-bottom-color: transparent; |
bc-b-white | border-bottom-color: #ffffff; |
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.
| Class | Style |
|---|---|
bc-l-red-1 | border-left-color: #f9e0e0; |
bc-l-red-2 | border-left-color: #f3c5c5; |
bc-l-red-3 | border-left-color: #edaaaa; |
bc-l-red-4 | border-left-color: #e88e8e; |
bc-l-red-5 | border-left-color: #e27373; |
bc-l-red-6 | border-left-color: #dd5858; |
bc-l-red | border-left-color: #d73d3d; |
bc-l-red-7 | border-left-color: #b93434; |
bc-l-red-8 | border-left-color: #9b2c2c; |
bc-l-red-9 | border-left-color: #7d2323; |
bc-l-red-10 | border-left-color: #5f1b1b; |
bc-l-red-11 | border-left-color: #411212; |
bc-l-red-12 | border-left-color: #220a0a; |
bc-l-orange-1 | border-left-color: #fae7d9; |
bc-l-orange-2 | border-left-color: #f6d2b9; |
bc-l-orange-3 | border-left-color: #f1bd98; |
bc-l-orange-4 | border-left-color: #eda777; |
bc-l-orange-5 | border-left-color: #e99256; |
bc-l-orange-6 | border-left-color: #e47d35; |
bc-l-orange | border-left-color: #e06814; |
bc-l-orange-7 | border-left-color: #c15911; |
bc-l-orange-8 | border-left-color: #a14b0e; |
bc-l-orange-9 | border-left-color: #823c0c; |
bc-l-orange-10 | border-left-color: #632e09; |
bc-l-orange-11 | border-left-color: #431f06; |
bc-l-orange-12 | border-left-color: #241103; |
bc-l-yellow-1 | border-left-color: #f8f0d7; |
bc-l-yellow-2 | border-left-color: #f2e3b5; |
bc-l-yellow-3 | border-left-color: #ecd692; |
bc-l-yellow-4 | border-left-color: #e5c86f; |
bc-l-yellow-5 | border-left-color: #dfbb4c; |
bc-l-yellow-6 | border-left-color: #d9ae2a; |
bc-l-yellow | border-left-color: #d3a107; |
bc-l-yellow-7 | border-left-color: #b58a06; |
bc-l-yellow-8 | border-left-color: #987405; |
bc-l-yellow-9 | border-left-color: #7a5d04; |
bc-l-yellow-10 | border-left-color: #5d4703; |
bc-l-yellow-11 | border-left-color: #3f3002; |
bc-l-yellow-12 | border-left-color: #221a01; |
bc-l-green-1 | border-left-color: #dbf3e4; |
bc-l-green-2 | border-left-color: #bce8cc; |
bc-l-green-3 | border-left-color: #9cddb4; |
bc-l-green-4 | border-left-color: #7dd29c; |
bc-l-green-5 | border-left-color: #5ec785; |
bc-l-green-6 | border-left-color: #3ebc6d; |
bc-l-green | border-left-color: #1fb155; |
bc-l-green-7 | border-left-color: #1b9849; |
bc-l-green-8 | border-left-color: #167f3d; |
bc-l-green-9 | border-left-color: #126731; |
bc-l-green-10 | border-left-color: #0e4e25; |
bc-l-green-11 | border-left-color: #09351a; |
bc-l-green-12 | border-left-color: #051c0e; |
bc-l-teal-1 | border-left-color: #d9f1ee; |
bc-l-teal-2 | border-left-color: #b8e4df; |
bc-l-teal-3 | border-left-color: #97d8d0; |
bc-l-teal-4 | border-left-color: #76cbc2; |
bc-l-teal-5 | border-left-color: #54bfb3; |
bc-l-teal-6 | border-left-color: #33b2a4; |
bc-l-teal | border-left-color: #12a695; |
bc-l-teal-7 | border-left-color: #0f8f80; |
bc-l-teal-8 | border-left-color: #0d786b; |
bc-l-teal-9 | border-left-color: #0a6056; |
bc-l-teal-10 | border-left-color: #084942; |
bc-l-teal-11 | border-left-color: #05322d; |
bc-l-teal-12 | border-left-color: #031b18; |
bc-l-cyan-1 | border-left-color: #d7f0f5; |
bc-l-cyan-2 | border-left-color: #b4e4ec; |
bc-l-cyan-3 | border-left-color: #91d7e3; |
bc-l-cyan-4 | border-left-color: #6ecada; |
bc-l-cyan-5 | border-left-color: #4bbdd1; |
bc-l-cyan-6 | border-left-color: #28b1c8; |
bc-l-cyan | border-left-color: #05a4bf; |
bc-l-cyan-7 | border-left-color: #048da4; |
bc-l-cyan-8 | border-left-color: #04768a; |
bc-l-cyan-9 | border-left-color: #035f6f; |
bc-l-cyan-10 | border-left-color: #024854; |
bc-l-cyan-11 | border-left-color: #023139; |
bc-l-cyan-12 | border-left-color: #011a1f; |
bc-l-blue-1 | border-left-color: #dfe9fa; |
bc-l-blue-2 | border-left-color: #c2d6f5; |
bc-l-blue-3 | border-left-color: #a6c2f0; |
bc-l-blue-4 | border-left-color: #8aafeb; |
bc-l-blue-5 | border-left-color: #6e9ce7; |
bc-l-blue-6 | border-left-color: #5188e2; |
bc-l-blue | border-left-color: #3575dd; |
bc-l-blue-7 | border-left-color: #2e65be; |
bc-l-blue-8 | border-left-color: #26549f; |
bc-l-blue-9 | border-left-color: #1f4480; |
bc-l-blue-10 | border-left-color: #173361; |
bc-l-blue-11 | border-left-color: #102342; |
bc-l-blue-12 | border-left-color: #081323; |
bc-l-indigo-1 | border-left-color: #e4e5f9; |
bc-l-indigo-2 | border-left-color: #cdcef4; |
bc-l-indigo-3 | border-left-color: #b6b7ee; |
bc-l-indigo-4 | border-left-color: #9fa0e9; |
bc-l-indigo-5 | border-left-color: #878ae4; |
bc-l-indigo-6 | border-left-color: #7073de; |
bc-l-indigo | border-left-color: #595cd9; |
bc-l-indigo-7 | border-left-color: #4d4fbb; |
bc-l-indigo-8 | border-left-color: #40429c; |
bc-l-indigo-9 | border-left-color: #34357e; |
bc-l-indigo-10 | border-left-color: #27285f; |
bc-l-indigo-11 | border-left-color: #1b1c41; |
bc-l-indigo-12 | border-left-color: #0e0f23; |
bc-l-violet-1 | border-left-color: #eae3fa; |
bc-l-violet-2 | border-left-color: #d8cbf5; |
bc-l-violet-3 | border-left-color: #c6b3f0; |
bc-l-violet-4 | border-left-color: #b49beb; |
bc-l-violet-5 | border-left-color: #a183e7; |
bc-l-violet-6 | border-left-color: #8f6be2; |
bc-l-violet | border-left-color: #7d53dd; |
bc-l-violet-7 | border-left-color: #6c47be; |
bc-l-violet-8 | border-left-color: #5a3c9f; |
bc-l-violet-9 | border-left-color: #493080; |
bc-l-violet-10 | border-left-color: #372561; |
bc-l-violet-11 | border-left-color: #261942; |
bc-l-violet-12 | border-left-color: #140d23; |
bc-l-pink-1 | border-left-color: #f8e1ec; |
bc-l-pink-2 | border-left-color: #f2c6dc; |
bc-l-pink-3 | border-left-color: #ecabcc; |
bc-l-pink-4 | border-left-color: #e691bb; |
bc-l-pink-5 | border-left-color: #e076ab; |
bc-l-pink-6 | border-left-color: #da5c9a; |
bc-l-pink | border-left-color: #d4418a; |
bc-l-pink-7 | border-left-color: #b63877; |
bc-l-pink-8 | border-left-color: #992f63; |
bc-l-pink-9 | border-left-color: #7b2650; |
bc-l-pink-10 | border-left-color: #5d1d3d; |
bc-l-pink-11 | border-left-color: #401429; |
bc-l-pink-12 | border-left-color: #220a16; |
bc-l-slate-1 | border-left-color: #e0e0e3; |
bc-l-slate-2 | border-left-color: #c5c5ca; |
bc-l-slate-3 | border-left-color: #ababb1; |
bc-l-slate-4 | border-left-color: #909098; |
bc-l-slate-5 | border-left-color: #757580; |
bc-l-slate-6 | border-left-color: #5a5a67; |
bc-l-slate | border-left-color: #3f3f4e; |
bc-l-slate-7 | border-left-color: #363643; |
bc-l-slate-8 | border-left-color: #2d2d38; |
bc-l-slate-9 | border-left-color: #25252d; |
bc-l-slate-10 | border-left-color: #1c1c22; |
bc-l-slate-11 | border-left-color: #131317; |
bc-l-slate-12 | border-left-color: #0a0a0c; |
bc-l-gray-1 | border-left-color: #e6e7e9; |
bc-l-gray-2 | border-left-color: #cfd1d5; |
bc-l-gray-3 | border-left-color: #b9bcc1; |
bc-l-gray-4 | border-left-color: #a3a7ae; |
bc-l-gray-5 | border-left-color: #8d929a; |
bc-l-gray-6 | border-left-color: #767c87; |
bc-l-gray | border-left-color: #606773; |
bc-l-gray-7 | border-left-color: #535963; |
bc-l-gray-8 | border-left-color: #454a53; |
bc-l-gray-9 | border-left-color: #383c43; |
bc-l-gray-10 | border-left-color: #2a2d33; |
bc-l-gray-11 | border-left-color: #1d1f23; |
bc-l-gray-12 | border-left-color: #0f1012; |
bc-l-silver-1 | border-left-color: #f5f5f6; |
bc-l-silver-2 | border-left-color: #ecedee; |
bc-l-silver-3 | border-left-color: #e3e4e6; |
bc-l-silver-4 | border-left-color: #dadcdf; |
bc-l-silver-5 | border-left-color: #d1d3d7; |
bc-l-silver-6 | border-left-color: #c8cbcf; |
bc-l-silver | border-left-color: #bfc2c7; |
bc-l-silver-7 | border-left-color: #a4a7ab; |
bc-l-silver-8 | border-left-color: #8a8c8f; |
bc-l-silver-9 | border-left-color: #6f7173; |
bc-l-silver-10 | border-left-color: #545558; |
bc-l-silver-11 | border-left-color: #393a3c; |
bc-l-silver-12 | border-left-color: #1f1f20; |
bc-l-black | border-left-color: #000000; |
bc-l-current | border-left-color: currentColor; |
bc-l-transparent | border-left-color: transparent; |
bc-l-white | border-left-color: #ffffff; |
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.
| Class | Style |
|---|---|
bc-t-red-1 | border-top-color: #f9e0e0; |
bc-t-red-2 | border-top-color: #f3c5c5; |
bc-t-red-3 | border-top-color: #edaaaa; |
bc-t-red-4 | border-top-color: #e88e8e; |
bc-t-red-5 | border-top-color: #e27373; |
bc-t-red-6 | border-top-color: #dd5858; |
bc-t-red | border-top-color: #d73d3d; |
bc-t-red-7 | border-top-color: #b93434; |
bc-t-red-8 | border-top-color: #9b2c2c; |
bc-t-red-9 | border-top-color: #7d2323; |
bc-t-red-10 | border-top-color: #5f1b1b; |
bc-t-red-11 | border-top-color: #411212; |
bc-t-red-12 | border-top-color: #220a0a; |
bc-t-orange-1 | border-top-color: #fae7d9; |
bc-t-orange-2 | border-top-color: #f6d2b9; |
bc-t-orange-3 | border-top-color: #f1bd98; |
bc-t-orange-4 | border-top-color: #eda777; |
bc-t-orange-5 | border-top-color: #e99256; |
bc-t-orange-6 | border-top-color: #e47d35; |
bc-t-orange | border-top-color: #e06814; |
bc-t-orange-7 | border-top-color: #c15911; |
bc-t-orange-8 | border-top-color: #a14b0e; |
bc-t-orange-9 | border-top-color: #823c0c; |
bc-t-orange-10 | border-top-color: #632e09; |
bc-t-orange-11 | border-top-color: #431f06; |
bc-t-orange-12 | border-top-color: #241103; |
bc-t-yellow-1 | border-top-color: #f8f0d7; |
bc-t-yellow-2 | border-top-color: #f2e3b5; |
bc-t-yellow-3 | border-top-color: #ecd692; |
bc-t-yellow-4 | border-top-color: #e5c86f; |
bc-t-yellow-5 | border-top-color: #dfbb4c; |
bc-t-yellow-6 | border-top-color: #d9ae2a; |
bc-t-yellow | border-top-color: #d3a107; |
bc-t-yellow-7 | border-top-color: #b58a06; |
bc-t-yellow-8 | border-top-color: #987405; |
bc-t-yellow-9 | border-top-color: #7a5d04; |
bc-t-yellow-10 | border-top-color: #5d4703; |
bc-t-yellow-11 | border-top-color: #3f3002; |
bc-t-yellow-12 | border-top-color: #221a01; |
bc-t-green-1 | border-top-color: #dbf3e4; |
bc-t-green-2 | border-top-color: #bce8cc; |
bc-t-green-3 | border-top-color: #9cddb4; |
bc-t-green-4 | border-top-color: #7dd29c; |
bc-t-green-5 | border-top-color: #5ec785; |
bc-t-green-6 | border-top-color: #3ebc6d; |
bc-t-green | border-top-color: #1fb155; |
bc-t-green-7 | border-top-color: #1b9849; |
bc-t-green-8 | border-top-color: #167f3d; |
bc-t-green-9 | border-top-color: #126731; |
bc-t-green-10 | border-top-color: #0e4e25; |
bc-t-green-11 | border-top-color: #09351a; |
bc-t-green-12 | border-top-color: #051c0e; |
bc-t-teal-1 | border-top-color: #d9f1ee; |
bc-t-teal-2 | border-top-color: #b8e4df; |
bc-t-teal-3 | border-top-color: #97d8d0; |
bc-t-teal-4 | border-top-color: #76cbc2; |
bc-t-teal-5 | border-top-color: #54bfb3; |
bc-t-teal-6 | border-top-color: #33b2a4; |
bc-t-teal | border-top-color: #12a695; |
bc-t-teal-7 | border-top-color: #0f8f80; |
bc-t-teal-8 | border-top-color: #0d786b; |
bc-t-teal-9 | border-top-color: #0a6056; |
bc-t-teal-10 | border-top-color: #084942; |
bc-t-teal-11 | border-top-color: #05322d; |
bc-t-teal-12 | border-top-color: #031b18; |
bc-t-cyan-1 | border-top-color: #d7f0f5; |
bc-t-cyan-2 | border-top-color: #b4e4ec; |
bc-t-cyan-3 | border-top-color: #91d7e3; |
bc-t-cyan-4 | border-top-color: #6ecada; |
bc-t-cyan-5 | border-top-color: #4bbdd1; |
bc-t-cyan-6 | border-top-color: #28b1c8; |
bc-t-cyan | border-top-color: #05a4bf; |
bc-t-cyan-7 | border-top-color: #048da4; |
bc-t-cyan-8 | border-top-color: #04768a; |
bc-t-cyan-9 | border-top-color: #035f6f; |
bc-t-cyan-10 | border-top-color: #024854; |
bc-t-cyan-11 | border-top-color: #023139; |
bc-t-cyan-12 | border-top-color: #011a1f; |
bc-t-blue-1 | border-top-color: #dfe9fa; |
bc-t-blue-2 | border-top-color: #c2d6f5; |
bc-t-blue-3 | border-top-color: #a6c2f0; |
bc-t-blue-4 | border-top-color: #8aafeb; |
bc-t-blue-5 | border-top-color: #6e9ce7; |
bc-t-blue-6 | border-top-color: #5188e2; |
bc-t-blue | border-top-color: #3575dd; |
bc-t-blue-7 | border-top-color: #2e65be; |
bc-t-blue-8 | border-top-color: #26549f; |
bc-t-blue-9 | border-top-color: #1f4480; |
bc-t-blue-10 | border-top-color: #173361; |
bc-t-blue-11 | border-top-color: #102342; |
bc-t-blue-12 | border-top-color: #081323; |
bc-t-indigo-1 | border-top-color: #e4e5f9; |
bc-t-indigo-2 | border-top-color: #cdcef4; |
bc-t-indigo-3 | border-top-color: #b6b7ee; |
bc-t-indigo-4 | border-top-color: #9fa0e9; |
bc-t-indigo-5 | border-top-color: #878ae4; |
bc-t-indigo-6 | border-top-color: #7073de; |
bc-t-indigo | border-top-color: #595cd9; |
bc-t-indigo-7 | border-top-color: #4d4fbb; |
bc-t-indigo-8 | border-top-color: #40429c; |
bc-t-indigo-9 | border-top-color: #34357e; |
bc-t-indigo-10 | border-top-color: #27285f; |
bc-t-indigo-11 | border-top-color: #1b1c41; |
bc-t-indigo-12 | border-top-color: #0e0f23; |
bc-t-violet-1 | border-top-color: #eae3fa; |
bc-t-violet-2 | border-top-color: #d8cbf5; |
bc-t-violet-3 | border-top-color: #c6b3f0; |
bc-t-violet-4 | border-top-color: #b49beb; |
bc-t-violet-5 | border-top-color: #a183e7; |
bc-t-violet-6 | border-top-color: #8f6be2; |
bc-t-violet | border-top-color: #7d53dd; |
bc-t-violet-7 | border-top-color: #6c47be; |
bc-t-violet-8 | border-top-color: #5a3c9f; |
bc-t-violet-9 | border-top-color: #493080; |
bc-t-violet-10 | border-top-color: #372561; |
bc-t-violet-11 | border-top-color: #261942; |
bc-t-violet-12 | border-top-color: #140d23; |
bc-t-pink-1 | border-top-color: #f8e1ec; |
bc-t-pink-2 | border-top-color: #f2c6dc; |
bc-t-pink-3 | border-top-color: #ecabcc; |
bc-t-pink-4 | border-top-color: #e691bb; |
bc-t-pink-5 | border-top-color: #e076ab; |
bc-t-pink-6 | border-top-color: #da5c9a; |
bc-t-pink | border-top-color: #d4418a; |
bc-t-pink-7 | border-top-color: #b63877; |
bc-t-pink-8 | border-top-color: #992f63; |
bc-t-pink-9 | border-top-color: #7b2650; |
bc-t-pink-10 | border-top-color: #5d1d3d; |
bc-t-pink-11 | border-top-color: #401429; |
bc-t-pink-12 | border-top-color: #220a16; |
bc-t-slate-1 | border-top-color: #e0e0e3; |
bc-t-slate-2 | border-top-color: #c5c5ca; |
bc-t-slate-3 | border-top-color: #ababb1; |
bc-t-slate-4 | border-top-color: #909098; |
bc-t-slate-5 | border-top-color: #757580; |
bc-t-slate-6 | border-top-color: #5a5a67; |
bc-t-slate | border-top-color: #3f3f4e; |
bc-t-slate-7 | border-top-color: #363643; |
bc-t-slate-8 | border-top-color: #2d2d38; |
bc-t-slate-9 | border-top-color: #25252d; |
bc-t-slate-10 | border-top-color: #1c1c22; |
bc-t-slate-11 | border-top-color: #131317; |
bc-t-slate-12 | border-top-color: #0a0a0c; |
bc-t-gray-1 | border-top-color: #e6e7e9; |
bc-t-gray-2 | border-top-color: #cfd1d5; |
bc-t-gray-3 | border-top-color: #b9bcc1; |
bc-t-gray-4 | border-top-color: #a3a7ae; |
bc-t-gray-5 | border-top-color: #8d929a; |
bc-t-gray-6 | border-top-color: #767c87; |
bc-t-gray | border-top-color: #606773; |
bc-t-gray-7 | border-top-color: #535963; |
bc-t-gray-8 | border-top-color: #454a53; |
bc-t-gray-9 | border-top-color: #383c43; |
bc-t-gray-10 | border-top-color: #2a2d33; |
bc-t-gray-11 | border-top-color: #1d1f23; |
bc-t-gray-12 | border-top-color: #0f1012; |
bc-t-silver-1 | border-top-color: #f5f5f6; |
bc-t-silver-2 | border-top-color: #ecedee; |
bc-t-silver-3 | border-top-color: #e3e4e6; |
bc-t-silver-4 | border-top-color: #dadcdf; |
bc-t-silver-5 | border-top-color: #d1d3d7; |
bc-t-silver-6 | border-top-color: #c8cbcf; |
bc-t-silver | border-top-color: #bfc2c7; |
bc-t-silver-7 | border-top-color: #a4a7ab; |
bc-t-silver-8 | border-top-color: #8a8c8f; |
bc-t-silver-9 | border-top-color: #6f7173; |
bc-t-silver-10 | border-top-color: #545558; |
bc-t-silver-11 | border-top-color: #393a3c; |
bc-t-silver-12 | border-top-color: #1f1f20; |
bc-t-black | border-top-color: #000000; |
bc-t-current | border-top-color: currentColor; |
bc-t-transparent | border-top-color: transparent; |
bc-t-white | border-top-color: #ffffff; |
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>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Using media queries
You can combine responsive breakpoints like sm:bc-*, md:bc-*, lg:bc-*, and xxl:bc-* to allow targeting specific utilities in different viewports.
Using hover states
Alternatively, you can apply :hover by using h:bc-* utility to override elements and change their values when hovering over them.