In this section we will see how to use border color in tailwind css. border color left and right, border top and bottom, hover border color and custom hover color border example 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 border color left, right, top and bottom side.
<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"
/>