Border Color

A wide range of color palettes for the border of an element.

Classes
Class Properties
border-primary border-color: var(--primary-color);
border-white border-color: #ffffff;
border-0 border-color: var(--surface-0);
border-50 border-color: var(--surface-50);
border-200 border-color: var(--surface-100);
border-200 border-color: var(--surface-200);
border-300 border-color: var(--surface-300);
border-400 border-color: var(--surface-400);
border-500 border-color: var(--surface-500);
border-600 border-color: var(--surface-600);
border-700 border-color: var(--surface-700);
border-800 border-color: var(--surface-800);
border-900 border-color: var(--surface-900);
border-blue-50 border-color: var(--blue-50);
border-blue-100 border-color: var(--blue-100);
border-blue-200 border-color: var(--blue-200);
border-blue-300 border-color: var(--blue-300);
border-blue-400 border-color: var(--blue-400);
border-blue-500 border-color: var(--blue-500);
border-blue-600 border-color: var(--blue-600);
border-blue-700 border-color: var(--blue-700);
border-blue-800 border-color: var(--blue-800);
border-blue-900 border-color: var(--blue-900);
border-green-50 border-color: var(--green-50);
border-green-100 border-color: var(--green-100);
border-green-200 border-color: var(--green-200);
border-green-300 border-color: var(--green-300);
border-green-400 border-color: var(--green-400);
border-green-500 border-color: var(--green-500);
border-green-600 border-color: var(--green-600);
border-green-700 border-color: var(--green-700);
border-green-800 border-color: var(--green-800);
border-green-900 border-color: var(--green-900);
border-yellow-50 border-color: var(--yellow-50);
border-yellow-100 border-color: var(--yellow-100);
border-yellow-200 border-color: var(--yellow-200);
border-yellow-300 border-color: var(--yellow-300);
border-yellow-400 border-color: var(--yellow-400);
border-yellow-500 border-color: var(--yellow-500);
border-yellow-600 border-color: var(--yellow-600);
border-yellow-700 border-color: var(--yellow-700);
border-yellow-800 border-color: var(--yellow-800);
border-yellow-900 border-color: var(--yellow-900);
border-cyan-50 border-color: var(--cyan-50);
border-cyan-100 border-color: var(--cyan-100);
border-cyan-200 border-color: var(--cyan-200);
border-cyan-300 border-color: var(--cyan-300);
border-cyan-400 border-color: var(--cyan-400);
border-cyan-500 border-color: var(--cyan-500);
border-cyan-600 border-color: var(--cyan-600);
border-cyan-700 border-color: var(--cyan-700);
border-cyan-800 border-color: var(--cyan-800);
border-cyan-900 border-color: var(--cyan-900);
border-pink-50 border-color: var(--pink-50);
border-pink-100 border-color: var(--pink-100);
border-pink-200 border-color: var(--pink-200);
border-pink-300 border-color: var(--pink-300);
border-pink-400 border-color: var(--pink-400);
border-pink-500 border-color: var(--pink-500);
border-pink-600 border-color: var(--pink-600);
border-pink-700 border-color: var(--pink-700);
border-pink-800 border-color: var(--pink-800);
border-pink-900 border-color: var(--pink-900);
border-indigo-50 border-color: var(--indigo-50);
border-indigo-100 border-color: var(--indigo-100);
border-indigo-200 border-color: var(--indigo-200);
border-indigo-300 border-color: var(--indigo-300);
border-indigo-400 border-color: var(--indigo-400);
border-indigo-500 border-color: var(--indigo-500);
border-indigo-600 border-color: var(--indigo-600);
border-indigo-700 border-color: var(--indigo-700);
border-indigo-800 border-color: var(--indigo-800);
border-indigo-900 border-color: var(--indigo-900);
border-teal-50 border-color: var(--teal-50);
border-teal-100 border-color: var(--teal-100);
border-teal-200 border-color: var(--teal-200);
border-teal-300 border-color: var(--teal-300);
border-teal-400 border-color: var(--teal-400);
border-teal-500 border-color: var(--teal-500);
border-teal-600 border-color: var(--teal-600);
border-teal-700 border-color: var(--teal-700);
border-teal-800 border-color: var(--teal-800);
border-teal-900 border-color: var(--teal-900);
border-orange-50 border-color: var(--orange-50);
border-orange-100 border-color: var(--orange-100);
border-orange-200 border-color: var(--orange-200);
border-orange-300 border-color: var(--orange-300);
border-orange-400 border-color: var(--orange-400);
border-orange-500 border-color: var(--orange-500);
border-orange-600 border-color: var(--orange-600);
border-orange-700 border-color: var(--orange-700);
border-orange-800 border-color: var(--orange-800);
border-orange-900 border-color: var(--orange-900);
border-bluegray-50 border-color: var(--bluegray-50);
border-bluegray-100 border-color: var(--bluegray-100);
border-bluegray-200 border-color: var(--bluegray-200);
border-bluegray-300 border-color: var(--bluegray-300);
border-bluegray-400 border-color: var(--bluegray-400);
border-bluegray-500 border-color: var(--bluegray-500);
border-bluegray-600 border-color: var(--bluegray-600);
border-bluegray-700 border-color: var(--bluegray-700);
border-bluegray-800 border-color: var(--bluegray-800);
border-bluegray-900 border-color: var(--bluegray-900);
border-purple-50 border-color: var(--purple-50);
border-purple-100 border-color: var(--purple-100);
border-purple-200 border-color: var(--purple-200);
border-purple-300 border-color: var(--purple-300);
border-purple-400 border-color: var(--purple-400);
border-purple-500 border-color: var(--purple-500);
border-purple-600 border-color: var(--purple-600);
border-purple-700 border-color: var(--purple-700);
border-purple-800 border-color: var(--purple-800);
border-purple-900 border-color: var(--purple-900);
border-gray-50 border-color: var(--gray-50);
border-gray-100 border-color: var(--gray-100);
border-gray-200 border-color: var(--gray-200);
border-gray-300 border-color: var(--gray-300);
border-gray-400 border-color: var(--gray-400);
border-gray-500 border-color: var(--gray-500);
border-gray-600 border-color: var(--gray-600);
border-gray-700 border-color: var(--gray-700);
border-gray-800 border-color: var(--gray-800);
border-gray-900 border-color: var(--gray-900);
Examples
border-700
border-blue-700
border-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-700 border-2 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-700</div>
    <div class="border-blue-700 border-2 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-blue-700</div>
    <div class="border-purple-700 border-2 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-purple-700</div>
</div>

Pseudo States

Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively.

hover:border-700
hover:border-blue-700
hover:border-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="border-500 hover:border-700 border-3 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-700</div>
    <div class="border-blue-500 hover:border-blue-700 border-3 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-blue-700</div>
    <div class="border-purple-500 hover:border-purple-700 border-3 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-purple-700</div>
</div>