tabler/docs/content/ui/utilities/borders.mdx

---
title: Borders
summary: Border utilities set the sides, width, color, radius and opacity of an element's border with a class.
description: Style borders with utility classes - control sides, colors, width, and radius without writing any custom CSS.
related: [/ui/base/colors]
---
import Example from '@components/Example.astro';

## Border direction

Use these classes to put a border on one side, on two opposite sides or all around an element. `border-x` and `border-y` set both horizontal or both vertical sides at once.

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

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


## Border size

Three widths are available: none, the default width and a wider one.

```html
<div class="border-0">1</div>
<div class="border">2</div>
<div class="border-wide">3</div>
```

<Example centered hideCode>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-wide">3</div>
</Example>

## Remove border

When an element already has `border`, remove it from one side with the `-0` suffix. This is handy when two elements sit next to each other and would otherwise draw a double line.

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

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


## Border color

Set the border color with one of the theme color classes. The names follow the [color](/ui/base/colors) utilities.

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

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

## Border radius

The `rounded-*` classes set the border radius, from square corners through three sizes to a full circle.

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

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


## Border opacity

The `border-opacity-*` classes make a colored border partly transparent. Use them to soften a border without picking a lighter color.

```html
<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
```

<Example hideCode>
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
</Example>

## Accessibility

- A border is decoration. It cannot be the only thing that marks a selected, focused or invalid state.
- Do not remove a focus outline with a border utility. If you restyle focus, keep a visible ring with at least 3:1 contrast against its surroundings.
- Border colors are often below the contrast needed for text, which is fine for a divider but not for something that carries meaning.
- A border used to group form fields does not create a group. Use a `fieldset` with a `legend`.