tailwind css border width example

In this section we will see how to use border width in tailwind css. border left and right, border top and bottom, border sizes and hover border and custom border example with Tailwind CSS.

Example 1

Tailwind border utilities size border, border-2, border-4, border-8 all side border.

<div class="p-4 border">Border 1</div>
<div class="p-4 border-2">Border 2</div>
<div class="p-4 border-4">Border 4</div>
<div class="p-4 border-8">Border 8</div>
tailwind css border all sides

tailwind css border all sides

Example 2

Tailwind border top, border right, border bottom, border left.

<div class="p-4 border-t-4 shadow">Border Top</div>
<div class="p-4 border-r-4 shadow">Border Right</div>
<div class="p-4 border-b-4 shadow">Border Bottom</div>
<div class="p-4 border-l-8 shadow">Border Left</div>
tailwind border top, left, right, bottom

tailwind border top, left, right, bottom

Example 3

Tailwind borders horizontal and vertical sides using border-{x|y}-{width}.

<div class="p-4 border-x-4">border-x-4</div>
<div class="p-4 border-y-4">border-y-4</div>
tailwind borders horizontal and vertical

tailwind borders horizontal and vertical

Example 4

Tailwind responsive border using lg, md.

<div class="p-4 border lg:border-4 md:border-2">Responsive Border</div>

tailwind css hover border.

<div class="p-4 border hover:border-4">hover Border</div>

Example 5

tailwind css custom border with px, rem.

<div class="p-4 border-[12px]">Custom Border</div>
<div class="p-4 border-[1.6rem]">Custom Border</div>

Outline button using tailwind border class.

<button class="px-6 py-2 text-indigo-700 border-2 border-indigo-500 hover:bg-indigo-500 hover:text-indigo-100">
<button class="px-6 py-2 text-red-700 border-2 border-red-500 rounded-full hover:bg-red-500 hover:text-red-100">
outline button with border class

outline button with border class

Neobrutalism Button using tailwind border class.

<button class="px-5 py-2 font-medium border border-b-4 border-r-4 border-black rounded-lg shadow-lg hover:shadow-sm">
    Neobrutalism Button</button>
border button

border button