⌘ K
esc

    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);
    border-white-alpha-10 border-color: rgba(255,255,255,0.1);
    border-white-alpha-20 border-color: rgba(255,255,255,0.2);
    border-white-alpha-30 border-color: rgba(255,255,255,0.3);
    border-white-alpha-40 border-color: rgba(255,255,255,0.4);
    border-white-alpha-50 border-color: rgba(255,255,255,0.5);
    border-white-alpha-60 border-color: rgba(255,255,255,0.6);
    border-white-alpha-70 border-color: rgba(255,255,255,0.7);
    border-white-alpha-80 border-color: rgba(255,255,255,0.8);
    border-white-alpha-90 border-color: rgba(255,255,255,0.9);
    border-black-alpha-10 border-color: rgba(0,0,0,0.1);
    border-black-alpha-20 border-color: rgba(0,0,0,0.2);
    border-black-alpha-30 border-color: rgba(0,0,0,0.3);
    border-black-alpha-40 border-color: rgba(0,0,0,0.4);
    border-black-alpha-50 border-color: rgba(0,0,0,0.5);
    border-black-alpha-60 border-color: rgba(0,0,0,0.6);
    border-black-alpha-70 border-color: rgba(0,0,0,0.7);
    border-black-alpha-80 border-color: rgba(0,0,0,0.8);
    border-black-alpha-90 border-color: rgba(0,0,0,0.9);
    Examples
    border-500
    border-cyan-500
    border-orange-500
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="border-500 surface-overlay border-3 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-500</div>
            <div class="border-cyan-500 surface-overlay border-3 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-cyan-500</div>
            <div class="border-orange-500 surface-overlay border-3 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">border-orange-500</div>
        </div>
    </div>
    
    
    Pseudo States

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

    hover:border-700
    hover:border-cyan-700
    hover:border-orange-700
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="border-500 hover:border-700 border-3 border-round surface-overlay font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-700</div>
            <div class="border-cyan-500 hover:border-cyan-700 border-round surface-overlay font-bold border-3 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-cyan-700</div>
            <div class="border-orange-500 hover:border-orange-700 border-round surface-overlay font-bold border-3 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:border-orange-700</div>
        </div>
    </div>