Border Color

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

Classes#

ClassProperties
border-primaryborder-color: var(--primary-color);
border-whiteborder-color: #ffffff;
border-transparentborder-color: transparent;
surface-borderborder-color: var(--surface-border);
border-0border-color: var(--surface-0);
border-50border-color: var(--surface-50);
border-200border-color: var(--surface-100);
border-200border-color: var(--surface-200);
border-300border-color: var(--surface-300);
border-400border-color: var(--surface-400);
border-500border-color: var(--surface-500);
border-600border-color: var(--surface-600);
border-700border-color: var(--surface-700);
border-800border-color: var(--surface-800);
border-900border-color: var(--surface-900);
border-blue-50border-color: var(--blue-50);
border-blue-100border-color: var(--blue-100);
border-blue-200border-color: var(--blue-200);
border-blue-300border-color: var(--blue-300);
border-blue-400border-color: var(--blue-400);
border-blue-500border-color: var(--blue-500);
border-blue-600border-color: var(--blue-600);
border-blue-700border-color: var(--blue-700);
border-blue-800border-color: var(--blue-800);
border-blue-900border-color: var(--blue-900);
border-green-50border-color: var(--green-50);
border-green-100border-color: var(--green-100);
border-green-200border-color: var(--green-200);
border-green-300border-color: var(--green-300);
border-green-400border-color: var(--green-400);
border-green-500border-color: var(--green-500);
border-green-600border-color: var(--green-600);
border-green-700border-color: var(--green-700);
border-green-800border-color: var(--green-800);
border-green-900border-color: var(--green-900);
border-yellow-50border-color: var(--yellow-50);
border-yellow-100border-color: var(--yellow-100);
border-yellow-200border-color: var(--yellow-200);
border-yellow-300border-color: var(--yellow-300);
border-yellow-400border-color: var(--yellow-400);
border-yellow-500border-color: var(--yellow-500);
border-yellow-600border-color: var(--yellow-600);
border-yellow-700border-color: var(--yellow-700);
border-yellow-800border-color: var(--yellow-800);
border-yellow-900border-color: var(--yellow-900);
border-cyan-50border-color: var(--cyan-50);
border-cyan-100border-color: var(--cyan-100);
border-cyan-200border-color: var(--cyan-200);
border-cyan-300border-color: var(--cyan-300);
border-cyan-400border-color: var(--cyan-400);
border-cyan-500border-color: var(--cyan-500);
border-cyan-600border-color: var(--cyan-600);
border-cyan-700border-color: var(--cyan-700);
border-cyan-800border-color: var(--cyan-800);
border-cyan-900border-color: var(--cyan-900);
border-pink-50border-color: var(--pink-50);
border-pink-100border-color: var(--pink-100);
border-pink-200border-color: var(--pink-200);
border-pink-300border-color: var(--pink-300);
border-pink-400border-color: var(--pink-400);
border-pink-500border-color: var(--pink-500);
border-pink-600border-color: var(--pink-600);
border-pink-700border-color: var(--pink-700);
border-pink-800border-color: var(--pink-800);
border-pink-900border-color: var(--pink-900);
border-indigo-50border-color: var(--indigo-50);
border-indigo-100border-color: var(--indigo-100);
border-indigo-200border-color: var(--indigo-200);
border-indigo-300border-color: var(--indigo-300);
border-indigo-400border-color: var(--indigo-400);
border-indigo-500border-color: var(--indigo-500);
border-indigo-600border-color: var(--indigo-600);
border-indigo-700border-color: var(--indigo-700);
border-indigo-800border-color: var(--indigo-800);
border-indigo-900border-color: var(--indigo-900);
border-teal-50border-color: var(--teal-50);
border-teal-100border-color: var(--teal-100);
border-teal-200border-color: var(--teal-200);
border-teal-300border-color: var(--teal-300);
border-teal-400border-color: var(--teal-400);
border-teal-500border-color: var(--teal-500);
border-teal-600border-color: var(--teal-600);
border-teal-700border-color: var(--teal-700);
border-teal-800border-color: var(--teal-800);
border-teal-900border-color: var(--teal-900);
border-orange-50border-color: var(--orange-50);
border-orange-100border-color: var(--orange-100);
border-orange-200border-color: var(--orange-200);
border-orange-300border-color: var(--orange-300);
border-orange-400border-color: var(--orange-400);
border-orange-500border-color: var(--orange-500);
border-orange-600border-color: var(--orange-600);
border-orange-700border-color: var(--orange-700);
border-orange-800border-color: var(--orange-800);
border-orange-900border-color: var(--orange-900);
border-bluegray-50border-color: var(--bluegray-50);
border-bluegray-100border-color: var(--bluegray-100);
border-bluegray-200border-color: var(--bluegray-200);
border-bluegray-300border-color: var(--bluegray-300);
border-bluegray-400border-color: var(--bluegray-400);
border-bluegray-500border-color: var(--bluegray-500);
border-bluegray-600border-color: var(--bluegray-600);
border-bluegray-700border-color: var(--bluegray-700);
border-bluegray-800border-color: var(--bluegray-800);
border-bluegray-900border-color: var(--bluegray-900);
border-purple-50border-color: var(--purple-50);
border-purple-100border-color: var(--purple-100);
border-purple-200border-color: var(--purple-200);
border-purple-300border-color: var(--purple-300);
border-purple-400border-color: var(--purple-400);
border-purple-500border-color: var(--purple-500);
border-purple-600border-color: var(--purple-600);
border-purple-700border-color: var(--purple-700);
border-purple-800border-color: var(--purple-800);
border-purple-900border-color: var(--purple-900);
border-gray-50border-color: var(--gray-50);
border-gray-100border-color: var(--gray-100);
border-gray-200border-color: var(--gray-200);
border-gray-300border-color: var(--gray-300);
border-gray-400border-color: var(--gray-400);
border-gray-500border-color: var(--gray-500);
border-gray-600border-color: var(--gray-600);
border-gray-700border-color: var(--gray-700);
border-gray-800border-color: var(--gray-800);
border-gray-900border-color: var(--gray-900);
border-red-50border-color: var(--red-50);
border-red-100border-color: var(--red-100);
border-red-200border-color: var(--red-200);
border-red-300border-color: var(--red-300);
border-red-400border-color: var(--red-400);
border-red-500border-color: var(--red-500);
border-red-600border-color: var(--red-600);
border-red-700border-color: var(--red-700);
border-red-800border-color: var(--red-800);
border-red-900border-color: var(--red-900);
border-primary-50border-color: var(--primary-50);
border-primary-100border-color: var(--primary-100);
border-primary-200border-color: var(--primary-200);
border-primary-300border-color: var(--primary-300);
border-primary-400border-color: var(--primary-400);
border-primary-500border-color: var(--primary-500);
border-primary-600border-color: var(--primary-600);
border-primary-700border-color: var(--primary-700);
border-primary-800border-color: var(--primary-800);
border-primary-900border-color: var(--primary-900);
border-white-alpha-10border-color: rgba(255,255,255,0.1);
border-white-alpha-20border-color: rgba(255,255,255,0.2);
border-white-alpha-30border-color: rgba(255,255,255,0.3);
border-white-alpha-40border-color: rgba(255,255,255,0.4);
border-white-alpha-50border-color: rgba(255,255,255,0.5);
border-white-alpha-60border-color: rgba(255,255,255,0.6);
border-white-alpha-70border-color: rgba(255,255,255,0.7);
border-white-alpha-80border-color: rgba(255,255,255,0.8);
border-white-alpha-90border-color: rgba(255,255,255,0.9);
border-black-alpha-10border-color: rgba(0,0,0,0.1);
border-black-alpha-20border-color: rgba(0,0,0,0.2);
border-black-alpha-30border-color: rgba(0,0,0,0.3);
border-black-alpha-40border-color: rgba(0,0,0,0.4);
border-black-alpha-50border-color: rgba(0,0,0,0.5);
border-black-alpha-60border-color: rgba(0,0,0,0.6);
border-black-alpha-70border-color: rgba(0,0,0,0.7);
border-black-alpha-80border-color: rgba(0,0,0,0.8);
border-black-alpha-90border-color: rgba(0,0,0,0.9);

Examples#

border-500
border-orange-500
border-primary-500
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <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-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 class="border-primary-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-primary-500
    </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="flex flex-wrap md:justify-content-between justify-content-center">
    <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-primary-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-primary-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>
 
        PrimeFlex 3.3.1 by PrimeTek