In this section, we will see how to use border color in Tailwind CSS. This includes setting border colors for the left and right sides, the top and bottom sides, hover border colors, and custom hover border color examples with Tailwind CSS.
Example 1
Tailwind CSS Simple border color with border size.
<div class="p-3 border border-blue-500">border color</div>
<div class="p-3 border-2 border-blue-500">border Color</div>
<div class="p-3 border-4 border-blue-500">border Color</div>
<div class="p-3 border-8 border-blue-500">border Color</div>
tailwind css border color with opacity.
<div class="p-3 border-4 border-blue-500/10">border color opacity</div>
<div class="p-3 border-4 border-blue-500/25">border color opacity</div>
<div class="p-3 border-4 border-blue-500/50">border color opacity</div>
<div class="p-3 border-4 border-blue-500/75">border color opacity</div>
<div class="p-3 border-4 border-blue-500/100">border color opacity</div>
Example 2
Tailwind CSS Border color on left, right, top, and bottom sides.
<div class="p-3 border-4 border-blue-100 border-t-blue-500">
border top color
</div>
<div class="p-3 border-4 border-blue-100 border-l-blue-500">
border lfet color
</div>
<div class="p-3 border-4 border-blue-100 border-b-blue-500">
border bottom color
</div>
<div class="p-3 border-4 border-blue-100 border-r-blue-500">
border right color
</div>
tailwind border color horizontal and vertical sides using border-{x|y}-{color}.
<div class="p-3 border-4 border-blue-100 border-x-blue-500">
border-x-blue-500
</div>
<div class="p-3 border-4 border-blue-100 border-y-blue-500">
border-y-blue-500
</div>
Example 3
tailwind responsive border color.
<div class="p-3 border-4 border-blue-400 md:border-blue-600">
responsive border color
</div>tailwind hover border color.
<div class="p-3 border-4 border-blue-400 hover:border-blue-600">
hover border color
</div>Example 4
tailwind custom border color.
<div class="p-3 border-4 border-[#bfff00]">border custom color</div>
tailwind css border color with outline buttons.
<button class="px-6 py-2 text-indigo-700 border-2 border-indigo-500">
Button
</button>
<button class="px-6 py-2 text-green-700 border-2 border-green-500">
Button
</button>
<button class="px-6 py-2 text-[#bfff00] border-2 border-[#bfff00]">
Button
</button>
tailwind css border color with input form.
<input
type="text"
class="w-full px-4 py-2 border-2 border-blue-400 outline-none rounded-md focus:border-blue-600"
/>