Border Radius

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

Usage

Caveats

The values sm, md, lg, and xl correlate to the border radius size and are not affected by breakpoints.

SASS Variables

Configure or disable the border radius helper classes. Requires the use of the vue-cli-plugin-vuetifylibrary and a configured variables.s(c|a)ss file. Additional information on how to configure variables is located on the SASS Variablesdocumentation page.

Rounded sizes are based off of the $border-radius-root variable which has a default value of 0.25rem.

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

Overwriting Radiuses

You can change or add border-radius sizes by adding a list named $rounded in your project’s variables file.

$rounded: (
  'sm': $border-radius-root / 3,
  'lg': $border-radius-root * 2
);

Examples

Misc

Logical values start and end are only used in the inline direction (left and right) to avoid confusion

Pill and circle

You can create pills with the .rounded-pill class and circles with the .rounded-circle class.

Rounding by side

Border radius is configurable on a per-side basis using the infix classes -t, -e, -b, and -s (corresponding respectively to the sides top, end, bottom and start).

E.g. .rounded-b-xl and .rounded-t.

Rounding by corner

Border radius is configurable on a per-corner basis using the infix classes, -ts, -te, -be, -bs (corresponding respectively to the corners top-start, top-end, bottom-end, bottom-start)

E.g. .rounded-be-xl and .rounded-te.