border-yellow: Tailwind CSS Border Color class

The border-yellow-* classes add a yellow border in different shades.


border-yellow

The border-yellow-* classes add a yellow border in different shades.

Example Code

html
<div class="grid grid-cols-4 p-2 space-y-2 rounded-t-md">
<div class="text-gray-500 border-2 rounded-md border-yellow-50 text-center w-24 p-4 font-bold">
border-yellow-50
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-100 text-center w-24 p-4 font-bold">
border-yellow-100
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-200 text-center w-24 p-4 font-bold">
border-yellow-200
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-300 text-center w-24 p-4 font-bold">
border-yellow-300
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-400 text-center w-24 p-4 font-bold">
border-yellow-400
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-500 text-center w-24 p-4 font-bold">
border-yellow-500
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-600 text-center w-24 p-4 font-bold">
border-yellow-600
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-700 text-center w-24 p-4 font-bold">
border-yellow-700
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-800 text-center w-24 p-4 font-bold">
border-yellow-800
</div>
<div class=" text-gray-500 border-2 rounded-md border-yellow-900 text-center w-24 p-4 font-bold">
border-yellow-900
</div>
<div class="text-gray-500 border border-yellow-950 p-4 rounded-md text-center w-24 font-bold">
bg-yellow-950
</div>
</div>

Preview

border-yellow-50

border-yellow-100

border-yellow-200

border-yellow-300

border-yellow-400

border-yellow-500

border-yellow-600

border-yellow-700

border-yellow-800

border-yellow-900

bg-yellow-950

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates