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.