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-vuetifylibrary and a configured variables.s(c|a)ss file. Additional information on how to configure variables is located on the SASS Variablesdocumentation 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 start).

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-be-xl and .rounded-te.

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-s-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.
Edit this page onGitHub