tabler/docs/ui/utilities/borders.mdx

---
title: Borders
description: 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.

```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
```

```html
<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.

```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
```

```html
<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.

```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
```

```html
<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.

```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
```

```html
<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.

```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
```

```html
<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>
```