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="border">1</div>
<div class="border-top">2</div>
<div class="border-end">3</div>
<div class="border-bottom">4</div>
<div class="border-start">5</div>
<div class="border-x">6</div>
<div class="border-y">7</div>
Border size
Below are the available border size utilities classes.
<div class="border-0">1</div>
<div class="border">2</div>
<div class="border-wide">3</div>
Remove border
You can remove a border on a single side of an element by using the following border utilities classes.
<div class="border border-top-0">1</div>
<div class="border border-end-0">2</div>
<div class="border border-bottom-0">3</div>
<div class="border border-start-0">4</div>
<div class="border border-x-0">5</div>
<div class="border border-y-0">6</div>
Border color
You can set a border color of any side of an element by adding the following utilities classes below.
<div class="border border-primary">1</div>
<div class="border border-secondary">2</div>
<div class="border border-success">3</div>
<div class="border border-warning">4</div>
<div class="border border-danger">5</div>
<div class="border border-info">6</div>
<div class="border border-dark">7</div>
<div class="border border-light">8</div>
Border radius
You can set a border to any element by using the following utilities classes below.
<div class="border rounded-0">1</div>
<div class="border rounded">2</div>
<div class="border rounded-1">3</div>
<div class="border rounded-2">4</div>
<div class="border rounded-3">5</div>
<div class="border rounded-circle">6</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
