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>
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>
Tailwind responsive border using lg, md.
<div class="p-4 border lg:border-4 md:border-2 border-blue-700">Responsive Border</div>
