tailwindcss/docs/source/borders.md

extends	title
_layouts.master	Borders

Borders

Sizes Colors Styles Radius Responsive

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)

  1px

2 2px

4 4px

8 8px

Colors

By default, borders use the @default-border-color. To override a border color, add one of the border color utilities.

<div class="border border-dark"></div>
<div class="border border-dark-soft"></div>
<div class="border border-dark-softer"></div>

<div class="border border-light"></div>
<div class="border border-light-soft"></div>
<div class="border border-light-softer"></div>

<div class="border border-invisible"></div>

div {
  .border-dark;
  .border-dark-soft;
  .border-dark-softer;

  .border-light;
  .border-light-soft;
  .border-light-softer;

  .border-invisible;
}

The default border colors can also be modified using the following variables.

// Variable:            Default:
@border-dark:           hsl(0, 0%, 82%);
@border-dark-soft:      hsl(0, 0%, 90%);
@border-dark-softer:    hsl(0, 0%, 96%);

@border-light:          hsl(0, 0%, 100%);
@border-light-soft:     hsl(0, 0%, 60%);
@border-light-softer:   hsl(0, 0%, 35%);

@default-border-color:  @border-dark-soft;

Styles

By default borders styles are set to solid. This be modified using the border style utilities.

<div class="border border-dashed"></div>
<div class="border border-dotted"></div>

div {
  .border-dashed;
  .border-dotted;
}

Radius

To apply a border-radius to an element, using the rounded utilities.

div {
  .rounded-sm;
  .rounded-t-sm;
  .rounded-r-sm;
  .rounded-b-sm;
  .rounded-l-sm;
  .rounded;
  .rounded-t;
  .rounded-r;
  .rounded-b;
  .rounded-l;
  .rounded-lg;
  .rounded-t-lg;
  .rounded-r-lg;
  .rounded-b-lg;
  .rounded-l-lg;
  .pill;
}

Responsive

The spacing utitlies can also be used with responsive prefixes:

<!-- Using the utilities in HTML: -->

<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>

// Using the utilities in Less:

div {
  .screen(lg, {
    .mt-6;
  });
}