Border radius

Use border utilities to quickly style the border-radius of any element.

Usage

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

Rounded corners

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

Pill and circle

Use the rounded-pill and rounded-circle classes to create pill and circle shapes.

Rounding by side

Use the rounded-t-*, rounded-b-*, rounded-s-*, and rounded-e-* classes to set the border-radius of an element on a specific side.

Rounding by corner

Use the rounded-te-*, rounded-ts-*, rounded-be-*, and rounded-bs-* classes to set the border-radius of an element on a specific corner.

No rounding

Use the rounded-0 class to remove the border-radius from an element.

Components

::: info

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

:::

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

Arbitrary border radius

In addition to the named sizes, the rounded prop accepts any valid CSS value or a plain number (converted to px):

<v-sheet rounded="8" />       <!-- border-radius: 8px -->
<v-sheet rounded="1.5rem" />  <!-- border-radius: 1.5rem -->
<v-sheet rounded="50%" />     <!-- border-radius: 50% -->

SASS variables

You can also use the following SASS variables to customize the border radius:

$rounded: (
  0: 0,
  'sm': $border-radius-root / 2,
  null: $border-radius-root,
  'md': $border-radius-root,
  'lg': $border-radius-root * 2,
  'xl': $border-radius-root * 6,
  'pill': 9999px,
  'circle': 50%
);

Disable border-radius class generation by setting the $rounded variable to false.

@use 'vuetify/settings' with (
  $rounded: false
);