How to Use Border Colors in Tailwind CSS

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>
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>
border color opacity

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>
border 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>
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>
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>
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"
/>
border color with input form