border-green: Tailwind CSS Border Color class

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


Border-green

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

Preview

border-green-50

border-green-100

border-green-200

border-green-300

border-green-400

border-green-500

border-green-600

border-green-700

border-green-800

border-green-900

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