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.
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:
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
Note: we can also remove a border by adding the utility class of
Next, let's cover border color.