tailwindcss/docs/source/styles/borders/base.md

extends	title
_layouts.markdown	Borders

Borders

Usage Responsive Customizing

Sizes

Construct border size utilities using the .border{-side?}{-width?} syntax. For example, .border would add a 1px border to all sides of the element, where .border-b-4 would add a 4px border to the bottom of the element. By default, borders are solid, and use the @default-border-color.

Class

border

Side (optional)

  All

t Top

r Right

b Bottom

l Left

Width (optional)

0 0px

  1px

2 2px

4 4px

8 8px

Border size examples

<!-- Add a 1px border to all sides -->
<div class="border"></div>

<!-- Add a 1px border to the top side -->
<div class="border-t"></div>

<!-- Add a 2px border to the top side -->
<div class="border-t-2"></div>

// Using the border size utilities in Less
div {
    .border;
    .border-t;
    .border-t-2;
}

Customizing border sizes

You can easily customize the border size utilities using the @border-width-scale variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.

// The default border width scale
@border-width-scale:
  '0' 0,
  default 1px,
  '2' 2px,
  '4' 4px,
  '8' 8px,
;