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.
How to install & setup Tailwind CSS v3
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 simple border color
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>
tailwind css border color opacity
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 color side left, right, top
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>
tailwind border color horizontal and vertical
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 custom border color
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 border color 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"
/>
tailwind border color with input form
Read Also
Tailwind CSS Border Radius Example
Tailwind CSS Border Width Example
Tailwind CSS v3 border-x and border-y utilities example
Tailwind CSS Contact Us Form with Bottom Border
