# Border Radius

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

# Usage

# Caveats

# SASS Variables

Configure or disable the border radius helper classes. Requires the use of the vue-cli-plugin-vuetify library and a configured variables.s(c|a)ss file. Additional information on how to configure variables is located on the SASS Variables documentation 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

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

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-br-xl and .rounded-tr.

# Removing Border Radius

Use the .rounded-0 helper class to remove all border radius on an element, or select by side or corner; e.g. .rounded-l-0 and .rounded-te-0.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.