Tailwind CSS - Border Width

Tailwind’s border width utilities allow you to control the thickness of an element’s borders. You can apply a uniform width to all sides or target individual sides for precise control.

Understanding Border Rendering

Important: For a border to be visible, you must define its width, style, and color. Forgetting any of these will result in an invisible border.

Width: border-2, border-t-4, etc.
Style: border-solid, border-dashed, etc.
Color: border-blue-500, border-slate-200, etc.

Border Width Classes

Here is a partial list of the most common border width utilities. Replace * with a number from the theme scale (0, 2, 4, 8) or leave it blank for 1px.

Class Pattern	Target Sides
border-*	All four sides
border-x-*	Left and right sides
border-y-*	Top and bottom sides
border-t-*	Top side only
border-b-*	Bottom side only
border-l-*	Left side only
border-r-*	Right side only
border-s-*	Start side (respects text direction, usually left)
border-e-*	End side (respects text direction, usually right)

Example: Building a UI Card

This example shows how different border widths can define structure within a component. A thin border (border) outlines the card, while a thicker bottom border (border-b-4) on the header creates a strong visual separation.

<div class="max-w-sm mx-auto my-8 bg-white dark:bg-slate-800 rounded-lg shadow-lg overflow-hidden border border-slate-200 dark:border-slate-700">
  <div class="p-4 border-b-4 border-blue-500">
    <h3 class="text-xl font-bold text-slate-800 dark:text-white">New Feature Released!</h3>
  </div>
  <div class="p-4">
    <p class="text-slate-600 dark:text-slate-300">
      We've just launched a new dashboard with enhanced analytics. Check it out now to get deeper insights into your data.
    </p>
  </div>
</div>

Real-World Application: Dividers

You can use border utilities on an empty <div> to create custom horizontal or vertical dividers. This is more flexible than using an <hr> element as you have full control over color, width, and margins.

<div class="p-8 space-y-4">
  <p>This is the first section of content.</p>

  <!-- A simple, thin divider -->
  <div class="border-b border-gray-200 dark:border-slate-700"></div>

  <p>This is the second section, separated by a thin line.</p>

  <!-- A thicker, styled divider -->
  <div class="border-b-4 border-dotted border-gray-300 dark:border-slate-600 my-8"></div>

  <p>This is the third section, separated by a decorative dotted line.</p>
</div>

Customizing Your Border Widths

You can easily add your own border width values to your project by customizing the borderWidth key in your tailwind.config.js file. This is useful for adhering to a specific design system that requires non-default values (like 3px or 6px).

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        '3': '3px',
        '6': '6px',
      }
    }
  },
  plugins: [],
}

After adding this configuration and recompiling your CSS, you can now use new classes like border-3 or border-b-6.