Border Color
Set the border color on an element.
Class |
Properties |
|
.border-primary | border-color: #0d6efd; | |
.border-secondary | border-color: #6c757d; | |
.border-success | border-color: #198754; | |
.border-info | border-color: #0dcaf0; | |
.border-warning | border-color: #ffc107; | |
.border-danger | border-color: #dc3545; | |
.border-light | border-color: #f8f9fa; | |
.border-dark | border-color: #212529; | |
.border-black | border-color: #000000; | |
.border-white | border-color: #ffffff; | |
.border-transparent | border-color: transparent; | |
.border-gray-100 | border-color: #f8f9fa; | |
.border-gray-200 | border-color: #e9ecef; | |
.border-gray-300 | border-color: #dee2e6; | |
.border-gray-400 | border-color: #ced4da; | |
.border-gray-500 | border-color: #adb5bd; | |
.border-gray-600 | border-color: #6c757d; | |
.border-gray-700 | border-color: #495057; | |
.border-gray-800 | border-color: #343a40; | |
.border-gray-900 | border-color: #212529; | |
.border-blue-100 | border-color: #cfe2ff; | |
.border-blue-200 | border-color: #9ec5fe; | |
.border-blue-300 | border-color: #6ea8fe; | |
.border-blue-400 | border-color: #3d8bfd; | |
.border-blue-500 | border-color: #0d6efd; | |
.border-blue-600 | border-color: #0a58ca; | |
.border-blue-700 | border-color: #084298; | |
.border-blue-800 | border-color: #052c65; | |
.border-blue-900 | border-color: #031633; | |
.border-indigo-100 | border-color: #e0cffc; | |
.border-indigo-200 | border-color: #c29ffa; | |
.border-indigo-300 | border-color: #a370f7; | |
.border-indigo-400 | border-color: #8540f5; | |
.border-indigo-500 | border-color: #6610f2; | |
.border-indigo-600 | border-color: #520dc2; | |
.border-indigo-700 | border-color: #3d0a91; | |
.border-indigo-800 | border-color: #290661; | |
.border-indigo-900 | border-color: #140330; | |
.border-purple-100 | border-color: #e2d9f3; | |
.border-purple-200 | border-color: #c5b3e6; | |
.border-purple-300 | border-color: #a98eda; | |
.border-purple-400 | border-color: #8c68cd; | |
.border-purple-500 | border-color: #6f42c1; | |
.border-purple-600 | border-color: #59359a; | |
.border-purple-700 | border-color: #432874; | |
.border-purple-800 | border-color: #2c1a4d; | |
.border-purple-900 | border-color: #160d27; | |
.border-pink-100 | border-color: #f7d6e6; | |
.border-pink-200 | border-color: #efadce; | |
.border-pink-300 | border-color: #e685b5; | |
.border-pink-400 | border-color: #de5c9d; | |
.border-pink-500 | border-color: #d63384; | |
.border-pink-600 | border-color: #ab296a; | |
.border-pink-700 | border-color: #801f4f; | |
.border-pink-800 | border-color: #561435; | |
.border-pink-900 | border-color: #2b0a1a; | |
.border-red-100 | border-color: #f8d7da; | |
.border-red-200 | border-color: #f1aeb5; | |
.border-red-300 | border-color: #ea868f; | |
.border-red-400 | border-color: #e35d6a; | |
.border-red-500 | border-color: #dc3545; | |
.border-red-600 | border-color: #b02a37; | |
.border-red-700 | border-color: #842029; | |
.border-red-800 | border-color: #58151c; | |
.border-red-900 | border-color: #2c0b0e; | |
.border-orange-100 | border-color: #ffe5d0; | |
.border-orange-200 | border-color: #fecba1; | |
.border-orange-300 | border-color: #feb272; | |
.border-orange-400 | border-color: #fd9843; | |
.border-orange-500 | border-color: #fd7e14; | |
.border-orange-600 | border-color: #ca6510; | |
.border-orange-700 | border-color: #984c0c; | |
.border-orange-800 | border-color: #653208; | |
.border-orange-900 | border-color: #331904; | |
.border-yellow-100 | border-color: #fff3cd; | |
.border-yellow-200 | border-color: #ffe69c; | |
.border-yellow-300 | border-color: #ffda6a; | |
.border-yellow-400 | border-color: #ffcd39; | |
.border-yellow-500 | border-color: #ffc107; | |
.border-yellow-600 | border-color: #cc9a06; | |
.border-yellow-700 | border-color: #997404; | |
.border-yellow-800 | border-color: #664d03; | |
.border-yellow-900 | border-color: #332701; | |
.border-green-100 | border-color: #d1e7dd; | |
.border-green-200 | border-color: #a3cfbb; | |
.border-green-300 | border-color: #75b798; | |
.border-green-400 | border-color: #479f76; | |
.border-green-500 | border-color: #198754; | |
.border-green-600 | border-color: #146c43; | |
.border-green-700 | border-color: #0f5132; | |
.border-green-800 | border-color: #0a3622; | |
.border-green-900 | border-color: #051b11; | |
.border-teal-100 | border-color: #d2f4ea; | |
.border-teal-200 | border-color: #a6e9d5; | |
.border-teal-300 | border-color: #79dfc1; | |
.border-teal-400 | border-color: #4dd4ac; | |
.border-teal-500 | border-color: #20c997; | |
.border-teal-600 | border-color: #1aa179; | |
.border-teal-700 | border-color: #13795b; | |
.border-teal-800 | border-color: #0d503c; | |
.border-teal-900 | border-color: #06281e; | |
.border-cyan-100 | border-color: #cff4fc; | |
.border-cyan-200 | border-color: #9eeaf9; | |
.border-cyan-300 | border-color: #6edff6; | |
.border-cyan-400 | border-color: #3dd5f3; | |
.border-cyan-500 | border-color: #0dcaf0; | |
.border-cyan-600 | border-color: #0aa2c0; | |
.border-cyan-700 | border-color: #087990; | |
.border-cyan-800 | border-color: #055160; | |
.border-cyan-900 | border-color: #032830; | |
The documentation on this page is no complete yet, work in progress 👍