Template listing hero section background

Exploring Tailwind CSS Border Width: Tips and Examples

Tailwind CSS blog | Published on : 16th August, 2023

Tailwind CSS follows a consistent naming convention for border width classes: border-{side}-{width}.

  • side can be t (top), b (bottom), l (left), or r(right).

Tips for Effective Use of Border Widths

  • Visual Hierarchy: Use varying border widths to establish a visual hierarchy. Thicker borders can draw attention to important elements, while thinner borders can subtly separate content.
  • Balance and Consistency: Maintain a sense of balance and consistency in your design. Use similar border widths across related elements to create a unified look.
  • Contrast: Leverage border widths to create contrast between sections. For instance, a thicker bottom border can visually separate a card's content from its footer.
  • Highlighting: Employ thicker borders on hover or focus to indicate interactivity. This technique can enhance the user experience.

Highlighted Quote Box

<div class="border border-l-4 border-blue-500 bg-gray-100 p-4">
    <blockquote class="text-lg text-gray-800">"Design is not just what it looks like and feels like. Design is how it works."</blockquote>
    <cite class="mt-2 block font-semibold text-blue-500">- Steve Jobs</cite>
  </div>

Tailwind CSS border width

In this example, the border-l-4 class adds a 4-pixel border to the left side of the quote box, creating an elegant highlight effect.

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

<div class="p-4 border border-blue-700">Border 1</div>
<div class="p-4 border-2 border-blue-700">Border 2</div>
<div class="p-4 border-4 border-blue-700">Border 4</div>
<div class="p-4 border-8 border-blue-700">Border 8</div>

Border width examples

Tailwind responsive border using lg, md.

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

Responsive Border

Read More :

  1. A Deep Dive into Tailwind CSS Border Colors: Tips and Examples
  2. Mastering Border-x and Border-y in Tailwind CSS: A Comprehensive Guide
  3. Mastering Border Radius in Tailwind CSS: A Comprehensive Guide
Colorfull background image for highlight footer
TailwindTap
Our team is creating and sharing useful resources on a regular basis and thousands of developers are using Tailwind CSS to create amazing websites with TailwindTap's free open-source pre-made components and templates.

Hire Tailwind CSS Developers

TailwindTap FacebookTailwindTap TwitterLinkedinInstagram