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

# Removing Border Radius

Use the .rounded-0 helper class to remove all of an elements radius or select by side or corner; e.g. .rounded-l-0 and .rounded-tr-0.

# Rounding all corners

The rounded helper classes allow you to modify the border radius of an element. Use the .rounded-sm, .rounded, .rounded-lg, and .rounded-xl to add a border radius of varying size.

# Rounding by side

Border radius is configurable on a per side basis using the infix classes, t, r, b, l; e.g. .rounded-b-xl and .rounded-t.

# Rounding by corner

Border radius is configurable on a per corner basis using the infix classes, tl, tr, br, bl; e.g. .rounded-br-xl and .rounded-tr.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/15/2021, 10:04:14 AM