You can control the borders of an element with utility classes starting with the prefix border-. Here are a few examples:

  • border-l-2: defines a 2px left border
  • border-4: defines a 4px border on all sides
  • border-x-3: defines a 3px left and right border

Again, these utility classes follow a simple structure:



The position can describe:

  • A single side

    t for top, r for right, b for bottom, or l for left;
  • All sides

    in this case, leave out the position;
  • Horizontal Border

    x, which means it's applied to left and right at the same time; or
  • Vertical Border

    y, which means it's applied to top and bottom at the same time.

Oddly familiar? Positioning for borders is the same as for spacing. The only difference is a dash between border and the position. So, while pl-4 defines a left padding, you have to use border-l-2 for defining a left border.

What utility class adds a top border?


The width is a number, defining the width of the border in pixels.

Note that this width does not refer to the default spacing scale discussed previously! For example, pl-4 adds a left padding of 1rem, while border-l-4 adds a left border of 4px.

There is also a shorthand notation for defining a 1px border: Simply leave out the width. For example, border-t defines a 1px top border.

What does the utility class border-x-4 do?


The border utility classes can be used in combination with a utility class defining the color of the border:


We will discuss how to use colors in Tailwind later on. For now, just know that there are colors called black and white. A black border, for example, can be achieved by using the border-black utility class in combination with the border- utility classes discussed above.

Apply a 2px top border to this element.

<div class="border-black ">
  <p class="py-4">Hello, world!</p>
Live Preview

Hello, world!

Rounded Corners

The rounded- utility classes allow you to quickly set a border radius.

Using the rounded class directly gives you a border radius of 0.25rem. Adding suffixes like sm, md, lg, xl, 2xl, etc. to this class changes the size of the border radius.

Live Preview