Border Radius

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

Usage

The helper classes are of format: rounded-{side|corner}-{size}, for more details see the examples below.

The sizes sm, lg, and xl correlate to the border radius size and are not affected by breakpoints.

Customizing

You can configure the border radius helper classes by overriding the $rounded variable in the _material-theme.scss file. By default $border-radius-root will have a default value of 0.25rem.

$rounded: map-deep-merge(
  (
    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%,
  ),
  $rounded
);

Examples

Different Sizes and Types

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.

Sides

Use these helper classes to add border radius to specific sides.

Corners

Use these helper classes to add border radius to specific corners.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Edit This Page on GitHub

Last Updated: 2022-10-03