Roundness setters

There are classes to make element edges sharp, round, circle...

.edge-sharp

.edge-round-xs

.edge-round-sm

.edge-round-md

.edge-round-lg

.edge-triangle

.edge-circle

.edge-oval

Custom helper classes

Note that these classes can be customized in _config.scss file (excepts sharp, circle and oval), there is a variable called $BORDER_RADIUS_LIST, These classes are generated from this list. So it is possible to create customized helper classes for roundness simply!

_config.scss

// This list will be converted to helper classes.
// .edge-[]
$BORDER_RADIUS_LIST: (
  sharp: 0em,
  round-xs: 0.32em,
  round-sm: 0.5em,
  round-md: 0.75em,
  round-lg: 1em,
  circle: 50em,
  oval: 50%,
  triangle: 100% 50% 50% 100% / 75% 69% 69% 75%,
  round-pillow: 88% 12% 89% 11% / 12% 89% 11% 88%,
  round-rice: 100% 0% 100% 0% / 100% 0% 100% 0%,
  round-flower: 1em 0.25em 1em 0.25em,
);