# Border Radius
Use border utilities to quickly style the border-radius of any element.
# Usage
# Caveats
The infixes sm, lg, xl, and xxl 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-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 * 4,
'xxl': $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, .rounded-xl and .rounded-xxl 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.