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:

Position

The position can describe:

• A single side

  t

  r

  b

  l
  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
  x, which means it's applied to left and right at the same time; or

• Vertical Border

  y
  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.

Width

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.

Color

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.

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.