---
meta:
  title: Borders
  description: Use border utilities to quickly style the border of any element.
  keywords: border classes, border utilities, vuetify border helper classes
related:
  - /styles/border-radius/
  - /styles/display/
  - /styles/content/
features:
  report: true
---

# Borders

Utilities for controlling the border of elements in your application.

<PageFeatures />

| Class | Properties |
| - | - |
| **border** | border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)); |
| **border-thin** | border-width: thin; |
| **border-sm** | border-width: 1px; |
| **border-md** | border-width: 2px; |
| **border-lg** | border-width: 4px; |
| **border-xl** | border-width: 8px; |
| **border-0** | border-width: 0; |
| **border-t** | border-top-width: thin; |
| **border-t-0** | border-top-width: 0; |
| **border-t-thin** | border-top-width: thin; |
| **border-t-sm** | border-top-width: 1px; |
| **border-t-md** | border-top-width: 2px; |
| **border-t-lg** | border-top-width: 4px; |
| **border-t-xl** | border-top-width: 8px; |
| **border-e** | border-inline-end-width: thin; |
| **border-e-0** | border-inline-end-width: 0; |
| **border-e-thin** | border-inline-end-width: thin; |
| **border-e-sm** | border-inline-end-width: 1px; |
| **border-e-md** | border-inline-end-width: 2px; |
| **border-e-lg** | border-inline-end-width: 4px; |
| **border-e-xl** | border-inline-end-width: 8px; |
| **border-b** | border-bottom-width: thin; |
| **border-b-0** | border-bottom-width: 0; |
| **border-b-thin** | border-bottom-width: thin; |
| **border-b-sm** | border-bottom-width: 1px; |
| **border-b-md** | border-bottom-width: 2px; |
| **border-b-lg** | border-bottom-width: 4px; |
| **border-b-xl** | border-bottom-width: 8px; |
| **border-s** | border-inline-start-width: thin; |
| **border-s-0** | border-inline-start-width: 0; |
| **border-s-thin** | border-inline-start-width: thin; |
| **border-s-sm** | border-inline-start-width: 1px; |
| **border-s-md** | border-inline-start-width: 2px; |
| **border-s-lg** | border-inline-start-width: 4px; |
| **border-s-xl** | border-inline-start-width: 8px; |
| **border-opacity-0** | --v-border-opacity: 0; |
| **border-opacity** | --v-border-opacity: .12; |
| **border-opacity-25** | --v-border-opacity: .25; |
| **border-opacity-50** | --v-border-opacity: .5; |
| **border-opacity-75** | --v-border-opacity: .75; |
| **border-opacity-100** | --v-border-opacity: 1; |
| **border-dashed** | border-style: dashed; |
| **border-dotted** | border-style: dotted; |
| **border-double** | border-style: double; |
| **border-solid** | border-style: solid; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

## Usage

The `border` utilities allow you to quickly style the border of any element.

### All sides

Use the **border**, **border-0**, **border-sm**, **border-md**, **border-lg**, and **border-xl** classes to set the border width of an element.

<ExamplesExample file="border/all" />

### Individual sides

Use the **border-\***, **border-\*-0**, **border-\*-sm**, **border-\*-md**, **border-\*-lg**, and **border-\*-xl** classes to set the border width of an element on a specific side.

<ExamplesExample file="border/sides" />

### Border styles

Use the **border-dashed**, **border-dotted**, **border-double**, and **border-solid** classes to set the border style of an element.

<ExamplesExample file="border/styles" />

### Theme colors

Components that support the **border** property can take advantage of all border utility classes. This includes colors generated by your theme.

<ExamplesExample file="border/colors" />

| Class | Properties |
| - | - |
| **border-primary** | --v-border-color: var(--v-theme-primary); |
| **border-secondary** | --v-border-color: var(--v-theme-secondary); |
| **border-accent** | --v-border-color: var(--v-theme-accent); |
| **border-error** | --v-border-color: var(--v-theme-error); |
| **border-info** | --v-border-color: var(--v-theme-info); |
| **border-success** | --v-border-color: var(--v-theme-success); |
| **border-warning** | --v-border-color: var(--v-theme-warning); |
| **border-surface** | --v-border-color: var(--v-theme-surface); |
| **border-background** | --v-border-color: var(--v-theme-background); |
| **border-surface-light** | --v-border-color: var(--v-theme-surface-light); |
| **border-surface-variant** | --v-border-color: var(--v-theme-surface-variant); |
| **border-surface-bright** | --v-border-color: var(--v-theme-surface-bright); |
| **border-current** | --v-border-color: currentColor; { style="max-height: 420px;" fixed-header } |

### Components

::: info

When using the **border** property on components, omit the `border-` prefix. For example, use `border="sm"` instead of `border="border-sm"`.

:::

Setting the **border** property to true applies a component specific border class, such as `v-card--border`. This is to ensure that basic border usage persists even if the utility classes are disabled.

<ExamplesExample file="border/card" />

## SASS variables

You can also use the following SASS variables to customize the border color and width:

```sass { resource="src/styles/settings.scss" }
@use 'vuetify/settings' with (
  $borders: (
    0: 0,
    null: thin,
    thin: thin,
    sm: 1px,
    md: 2px,
    lg: 4px,
    xl: 8px
  )
);
```

Disable border class generation by setting the $borders variable to **false**.

```sass { resource="src/styles/settings.scss" }
@use 'vuetify/settings' with (
  $borders: false
);
```
