Borders
Utilities for controlling the border of elements in your application.
| 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; |
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.
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.
Border styles
Use the border-dashed, border-dotted, border-double, and border-solid classes to set the border style of an element.
Theme colors
Components that support the border property can take advantage of all border utility classes. This includes colors generated by your theme.
| 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; |
Components
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.
SASS variables
You can also use the following SASS variables to customize the border color and width:
@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.
@use 'vuetify/settings' with (
$borders: false
);