PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Table of Contents

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