Use border utilities to quickly style the border-radius of any element.
The infixes sm, lg, and xl correlate to the border radius size and are not affected by breakpoints.
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.