---
title: Borders
summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
description: Style elements with border utilities.
---
## Border direction
Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
```html
1
2
3
4
5
6
7
```
```html example centered separated background="white"
1
2
3
4
5
6
7
```
## Border size
Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
```html
1
2
3
```
```html example centered separated background="white"
1
2
3
```
## Remove border
If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
```html
1
2
3
4
5
6
```
```html example centered separated background="white"
1
2
3
4
5
6
```
## Border color
Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
```html
1
2
3
4
5
6
7
8
```
```html example centered separated background="white"
1
2
3
4
5
6
7
8
```
## Border radius
Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
```html
1
2
3
4
5
6
```
```html example centered separated background="white"
1
2
3
4
5
6
```
## Border opacity
You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
```html
This is 50% opacity success border
```
```html example
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
```