border-slate: Tailwind CSS Border Color class

The rounded class applies small rounded corners to an element.


Border-slate

The border-slate-* classes apply a slate border of varying intensity on an element.

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

Preview

border-slate-50

border-slate-100

border-slate-200

border-slate-300

border-slate-400

border-slate-500

border-slate-600

border-slate-700

border-slate-800

border-slate-900

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