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);

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.

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
);