Vuetify

Store

For Enterprise

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

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.

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

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.

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

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.

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.

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

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!