border-blue: Tailwind CSS Border Color class

The border-blue-* classes add a blue border of various shades.


Border-blue

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

Preview

border-blue-50

border-blue-100

border-blue-200

border-blue-300

border-blue-400

border-blue-500

border-blue-600

border-blue-700

border-blue-800

border-blue-900

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