TailwindCSS Borders

Using our handy utility classes we can easily add border-width, border-color, border-style, border-opacity, and border-radius to any HTML element. First we'll take a look at adding the border width to an element.

Border Width

We can easily apply border width to an element with the border class. We could also apply a thicker width by applying border-2. Take a look at the following code:

<div class="border-2">Hello Borders</div>

This will give us the following result:

Codepen here

We can also apply those same width properties to the top, right, bottom, and left side of our element. Using border-l will apply a border left. We can make it thicker with border-l-2, we could apply it to the top, bottom or right as well with border-t, border-b, or border-r.

Note: we can also remove a border by adding the utility class of border-0.

Next, let's cover border color.

Border Color