---
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
1
2
3
4
5
6
7
```
1
2
3
4
5
6
7
## Border size
Three widths are available: none, the default width and a wider one.
```html
1
2
3
```
1
2
3
## 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
1
2
3
4
5
6
```
1
2
3
4
5
6
## Border color
Set the border color with one of the theme color classes. The names follow the [color](/ui/base/colors) utilities.
```html
1
2
3
4
5
6
7
8
```
1
2
3
4
5
6
7
8
## Border radius
The `rounded-*` classes set the border radius, from square corners through three sizes to a full circle.
```html
1
2
3
4
5
6
```
1
2
3
4
5
6
## Border opacity
The `border-opacity-*` classes make a colored border partly transparent. Use them to soften a border without picking a lighter color.
```html
This is 50% opacity success border
```
This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
## 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`.