Learn how to manage border sides, shapes, line types, and size.

Border features

Borders are similar to margins and padding but are more complicated because they can have their own color and style.

The size options for borders are more limited because we do not typically want borders as big as margins might get. More importantly, the size options for borders are measured in pixels, not rem. The most basic border option is .border, which gives us a 1-pixel border in all four directions.

After that, we have .border-{side}-{size}. Unlike padding and margins, a dash(-) is included before the side. The side options are: bottom (-b), top (-t), left (-l), and right (-r). Not including a side applies the size to all four sides. The size is also optional: -0, -2, -4, and -8, which is the width of the border in pixels. No specified size means a size of 1.

If either the side or the size is not included, we do not need the prefixing dash. For example, valid border-width classes include:

  • .border-2: Does not specify a side and gives us a 2-pixel border on all sides.
  • .border-b: Does not specify a size and gives us a 1-pixel bottom border.
  • border-r-4: Results in a 4-pixel right border.

Unlike margins or padding, Tailwind does not provide paired horizontal or vertical options for border width. We need to specify both sides separately—for example,class="border-t border-b".

Border lines

Border lines may have a style. To display a style, we use a separate Tailwind utility class. The default is a solid border, which is indicated with .border-solid. Tailwind also provides utilities for .border-dashed, .border-dotted, .border-double, and .border-none.

Border lines may also have a color and an opacity. The border color and opacity options are exactly the same as the text color options, only prefixed with .border. We can specify a color with .border-{color}—for example, .border-gray-500. Similarly, we can also specify opacity with .border-opacity-{level}—for example, .border-opacity-50. The colors and opacity levels are the same as for text.

Basic rounded options

Tailwind provides the following nine basic rounded options, each of which specifies the radius size in rem:

Get hands-on with 1200+ tech skills courses.