Tabler

Source code Sponsor

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Example 3
Update change-version.js (#29736)
Example 4
Regenerate package-lock.json (#29730)
Paweł Kuna
UI Designer
Status Profile Feedback
Settings Logout

Documentation

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border direction

The following border utilities classes will add border to any side of an element.

<div class="w-5 h-5 bg-light border"></div>
<div class="w-5 h-5 bg-light border-top"></div>
<div class="w-5 h-5 bg-light border-end"></div>
<div class="w-5 h-5 bg-light border-bottom"></div>
<div class="w-5 h-5 bg-light border-start"></div>
<div class="w-5 h-5 bg-light border-x"></div>
<div class="w-5 h-5 bg-light border-y"></div>

Border size

Below are the available border size utilities classes.

<div class="w-5 h-5 bg-light border-0"></div>
<div class="w-5 h-5 bg-light border"></div>
<div class="w-5 h-5 bg-light border-wide"></div>

Remove border

You can remove a border on a single side of an element by using the following border utilities classes.

<div class="w-5 h-5 bg-light border border-top-0"></div>
<div class="w-5 h-5 bg-light border border-end-0"></div>
<div class="w-5 h-5 bg-light border border-bottom-0"></div>
<div class="w-5 h-5 bg-light border border-start-0"></div>
<div class="w-5 h-5 bg-light border border-x-0"></div>
<div class="w-5 h-5 bg-light border border-y-0"></div>

Border color

You can set a border color of any side of an element by adding the following utilities classes below.

<div class="w-5 h-5 bg-light border border-primary"></div>
<div class="w-5 h-5 bg-light border border-secondary"></div>
<div class="w-5 h-5 bg-light border border-success"></div>
<div class="w-5 h-5 bg-light border border-warning"></div>
<div class="w-5 h-5 bg-light border border-danger"></div>
<div class="w-5 h-5 bg-light border border-info"></div>
<div class="w-5 h-5 bg-light border border-dark"></div>
<div class="w-5 h-5 bg-light border border-light"></div>

Border radius

You can set a border to any element by using the following utilities classes below.

<div class="w-5 h-5 bg-light border rounded-0"></div>
<div class="w-5 h-5 bg-light border rounded"></div>
<div class="w-5 h-5 bg-light border rounded-1"></div>
<div class="w-5 h-5 bg-light border rounded-2"></div>
<div class="w-5 h-5 bg-light border rounded-3"></div>
<div class="w-5 h-5 bg-light border rounded-circle"></div>