border-gray: Tailwind CSS Border Color class

The border-gray-* classes apply a gray border of varying intensity.


border-gray

The border-gray-* classes apply a gray border of varying intensity.

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-gray-50 text-center w-24 p-4 font-bold">
border-gray-50
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-100 text-center w-24 p-4 font-bold">
border-gray-100
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-200 text-center w-24 p-4 font-bold">
border-gray-200
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-300 text-center w-24 p-4 font-bold">
border-gray-300
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-400 text-center w-24 p-4 font-bold">
border-gray-400
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-500 text-center w-24 p-4 font-bold">
border-gray-500
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-600 text-center w-24 p-4 font-bold">
border-gray-600
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-700 text-center w-24 p-4 font-bold">
border-gray-700
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-800 text-center w-24 p-4 font-bold">
border-gray-800
</div>
<div class=" text-gray-500 border-2 rounded-md border-gray-900 text-center w-24 p-4 font-bold">
border-gray-900
</div>
<div class="text-gray-500 border border-gray-950 p-4 rounded-md text-center w-24 font-bold">
bg-blue-950
</div>
</div>

Preview

border-gray-50

border-gray-100

border-gray-200

border-gray-300

border-gray-400

border-gray-500

border-gray-600

border-gray-700

border-gray-800

border-gray-900

bg-gray-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