Tailwind CSS Border Color Example

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