---
emphasized: true
meta:
  title: Border radius
  description: Use border utilities to quickly style the border-radius of any element.
  keywords: border radius classes, radius utilities, vuetify radius helper classes
related:
  - /styles/text-and-typography/
  - /components/sheets/
  - /components/buttons/
features:
  report: true
---

# Border radius

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

<PageFeatures />

| Class | Properties |
| - | - |
| **rounded** | border-radius: 4px; |
| **rounded-0** | border-radius: 0; |
| **rounded-sm** | border-radius: 2px; |
| **rounded-md** | border-radius: 4px; |
| **rounded-lg** | border-radius: 8px; |
| **rounded-xl** | border-radius: 24px; |
| **rounded-pill** | border-radius: 9999px; |
| **rounded-circle** | border-radius: 50%; |
| **rounded-shaped** | border-radius: 24px 0 |
| **rounded-t** | border-top-left-radius: 4px;<br>border-top-right-radius: 4px; |
| **rounded-t-0** | border-top-left-radius: 0;<br>border-top-right-radius: 0; |
| **rounded-t-sm** | border-top-left-radius: 2px;<br>border-top-right-radius: 2px; |
| **rounded-t-md** | border-top-left-radius: 4px;<br>border-top-right-radius: 4px; |
| **rounded-t-lg** | border-top-left-radius: 8px;<br>border-top-right-radius: 8px; |
| **rounded-t-xl** | border-top-left-radius: 24px;<br>border-top-right-radius: 24px; |
| **rounded-t-pill** | border-top-left-radius: 9999px;<br>border-top-right-radius: 9999px; |
| **rounded-t-circle** | border-top-left-radius: 50%;<br>border-top-right-radius: 50%; |
| **rounded-t-shaped** | border-top-left-radius: 24px; border-top-right-radius: 0; |
| **rounded-te** | border-top-right-radius: 4px; |
| **rounded-te-0** | border-top-right-radius: 0; |
| **rounded-te-sm** | border-top-right-radius: 2px; |
| **rounded-te-md** | border-top-right-radius: 4px; |
| **rounded-te-lg** | border-top-right-radius: 8px; |
| **rounded-te-xl** | border-top-right-radius: 24px; |
| **rounded-te-pill** | border-top-right-radius: 9999px; |
| **rounded-te-circle** | border-top-right-radius: 50%; |
| **rounded-te-shaped** | border-top-right-radius: 24px<br>border-top-left-radius: 0; |
| **rounded-ts** | border-top-left-radius: 4px; |
| **rounded-ts-0** | border-top-left-radius: 0; |
| **rounded-ts-sm** | border-top-left-radius: 2px; |
| **rounded-ts-md** | border-top-left-radius: 4px; |
| **rounded-ts-lg** | border-top-left-radius: 8px; |
| **rounded-ts-xl** | border-top-left-radius: 24px; |
| **rounded-ts-pill** | border-top-left-radius: 9999px; |
| **rounded-ts-circle** | border-top-left-radius: 50%; |
| **rounded-ts-shaped** | border-top-left-radius: 24px; border-top-right-radius: 0; |
| **rounded-e** | border-inline-end-radius: 4px; |
| **rounded-e-0** | border-inline-end-radius: 0; |
| **rounded-e-sm** | border-inline-end-radius: 2px; |
| **rounded-e-md** | border-inline-end-radius: 4px; |
| **rounded-e-lg** | border-inline-end-radius: 8px; |
| **rounded-e-xl** | border-inline-end-radius: 24px; |
| **rounded-e-pill** | border-inline-end-radius: 9999px; |
| **rounded-e-circle** | border-inline-end-radius: 50%; |
| **rounded-e-shaped** | border-inline-end-radius: 0; border-inline-start-radius: 24px; |
| **rounded-b** | border-bottom-left-radius: 4px;<br>border-bottom-right-radius: 4px; |
| **rounded-b-0** | border-bottom-left-radius: 0;<br>border-bottom-right-radius: 0; |
| **rounded-b-sm** | border-bottom-left-radius: 2px;<br>border-bottom-right-radius: 2px; |
| **rounded-b-md** | border-bottom-left-radius: 4px;<br>border-bottom-right-radius: 4px; |
| **rounded-b-lg** | border-bottom-left-radius: 8px;<br>border-bottom-right-radius: 8px; |
| **rounded-b-xl** | border-bottom-left-radius: 24px;<br>border-bottom-right-radius: 24px; |
| **rounded-b-pill** | border-bottom-left-radius: 9999px;<br>border-bottom-right-radius: 9999px; |
| **rounded-b-circle** | border-bottom-left-radius: 50%;<br>border-bottom-right-radius: 50%; |
| **rounded-b-shaped** | border-bottom-left-radius: 0; border-bottom-right-radius: 24px; |
| **rounded-be** | border-bottom-right-radius: 4px; |
| **rounded-be-0** | border-bottom-right-radius: 0; |
| **rounded-be-sm** | border-bottom-right-radius: 2px; |
| **rounded-be-md** | border-bottom-right-radius: 4px; |
| **rounded-be-lg** | border-bottom-right-radius: 8px; |
| **rounded-be-xl** | border-bottom-right-radius: 24px; |
| **rounded-be-pill** | border-bottom-right-radius: 9999px; |
| **rounded-be-circle** | border-bottom-right-radius: 50%; |
| **rounded-be-shaped** | border-bottom-right-radius: 24px; border-bottom-left-radius: 0; |
| **rounded-bs** | border-inline-start-radius: 4px; |
| **rounded-bs-0** | border-inline-start-radius: 0; |
| **rounded-bs-sm** | border-inline-start-radius: 2px; |
| **rounded-bs-md** | border-inline-start-radius: 4px; |
| **rounded-bs-lg** | border-inline-start-radius: 8px; |
| **rounded-bs-xl** | border-inline-start-radius: 24px; |
| **rounded-bs-pill** | border-inline-start-radius: 9999px; |
| **rounded-bs-circle** | border-inline-start-radius: 50%; |
| **rounded-bs-shaped** | border-inline-start-radius: 24px; border-inline-end-radius: 0; |
| **rounded-s** | border-inline-start-radius: 4px; |
| **rounded-s-0** | border-inline-start-radius: 0; |
| **rounded-s-sm** | border-inline-start-radius: 2px; |
| **rounded-s-md** | border-inline-start-radius: 4px; |
| **rounded-s-lg** | border-inline-start-radius: 8px; |
| **rounded-s-xl** | border-inline-start-radius: 24px; |
| **rounded-s-pill** | border-inline-start-radius: 9999px; |
| **rounded-s-circle** | border-inline-start-radius: 50%; |
| **rounded-s-shaped** | border-inline-start-radius: 24px; border-inline-end-radius: 0; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

## 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.

<ExamplesExample file="border-radius/misc-rounded-corners" />

### Pill and circle

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

<ExamplesExample file="border-radius/misc-pill-and-circle" />

### 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.

<ExamplesExample file="border-radius/misc-rounding-by-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.

<ExamplesExample file="border-radius/misc-rounding-by-corner" />

### No rounding

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

<ExamplesExample file="border-radius/misc-removing-border-radius" />

### 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.

<ExamplesExample file="border-radius/misc-components" />

## Arbitrary border radius

<DocIntroduced version="4.1.0" />

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

```html
<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:

```scss
$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**.

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