Tailwind CSS Borders

Tailwind makes it easy to style borders and control rounded corners with a consistent set of utility classes.

Border Width

You can use Tailwind's border-{width} utility to set the border-width. The default border utility applies a 1px border. You can use values like border-0, border-2, border-4, or border-8 to set different border widths.

Border Color

You can control the border-color using border-{color}-{shade}. For example, border-slate-900 will set the border color to a dark gray.

The shade value can range from 50 (lightest) to 950 (darkest). The default stops are 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (which means you'll need to use one of those values when specifying the shade). If no color is specified, Tailwind typically defaults to a light gray.

Border Sides

You can apply borders to specific sides using border-{side}-{width}. If no side is specified, the border is applied to all four sides.

Modifier Side Targeted Example Class
t Top border-t-2
r Right border-r-4
b Bottom border-b-8
l Left border-l
x Horizontal (Left & Right) border-x-2
y Vertical (Top & Bottom) border-y-2

Border Style

The border style utility controls the visual pattern of the border. These are often used for decorative dividers, interactive states, or "drop-zone" areas for file uploads.

Utility CSS Property Best Use Case
border-solid border-style: solid; The default style for standard UI elements.
border-dashed border-style: dashed; Empty states, "Add New" buttons, or drag-and-drop zones.
border-dotted border-style: dotted; Secondary dividers or subtle separators.
border-double border-style: double; Classic or formal decorative borders (requires at least border-3 to see clearly).
border-none border-style: none; Removing a border inherited from a parent or global style.
border-hidden border-style: hidden; Used primarily to resolve border conflicts in complex tables.

Tailwind also has various divide-* utilities that can be used to create decorative dividers. These are often used in lists or tables to create visual separation between items.

Divide Utilities (Borders Between Elements)

The divide-{axis}-{width} utilities allow you to add borders between child elements without you having to manually manage first/last-child logic. These must be applied to the parent container (usually a flex or grid layout).

Divide Width

Utility Description Example
divide-x-{n} Adds horizontal borders between elements (for rows). flex divide-x-2
divide-y-{n} Adds vertical borders between elements (for stacks). flex flex-col divide-y
divide-{x|y}-reverse Corrects border placement if using flex-row-reverse. divide-x-reverse

Divide Style & Color

Just like standard borders, you can customize the appearance of these dividers.

Utility Effect
  • divide-solid
  • divide-dashed
  • divide-dotted
  • divide-double
  • divide-none
  • divide-hidden
 Sets the line style (the default is divide-solid).
divide-{color}-{shade} Sets the divider color (e.g., divide-slate-200).
divide-(--var) Uses a custom CSS variable for the divider color.

Quick Implementation

To create a clean, separated list, simply wrap your items in a container with a divide class:

Rounded Corners

You can also control the border-radius of an element. These utilities can be applied to all corners or targeted to specific sides or corners.

Utility Radius Value Visual Effect
rounded-sm 0.125rem (2px) Subtle rounding.
rounded 0.25rem (4px) Standard UI rounding.
rounded-lg 0.5rem (8px) Prominent card rounding.
rounded-xl 0.75rem (12px) Very soft, modern look.
rounded-full 9999px Creates pills or perfect circles.
rounded-none 0px Forces sharp corners.

Targeting Specific Corners

Much like the borders themselves, you can round specific corners (e.g., rounded-t-lg for the top two corners) or even a single corner (e.g., rounded-tl-lg for top-left).

Example

View Output

In the next page, we'll look at how use Tailwind CSS to implement common effects like shadows and focus rings.