border-radius

Sets the values of the necessary rules of border-radius properties family.

Some values can be automatically set to 0 (zero) using null (preferable) or its alias n .

Arguments

Name	Type	Default	Description
$value *	`list\|string`	—	Property value.
$direction	`?string`	`null`	The keyword describing the list of properties to use.

List of direction keywords:

Keyword	Affected properties
`top`	`border-top-left-radius`, `border-top-right-radius`
`right`	`border-top-right-radius`, `border-bottom-right-radius`
`bottom`	`border-bottom-right-radius`, `border-bottom-left-radius`
`left`	`border-top-left-radius`, `border-bottom-left-radius`
`top-right`	`border-top-right-radius`
`top-left`	`border-top-left-radius`
`bottom-right`	`border-bottom-right-radius`
`bottom-left`	`border-bottom-left-radius`
`cross-left`	`border-top-left-radius`, `border-bottom-right-radius`
`cross-right`	`border-top-right-radius`, `border-bottom-left-radius`
`all`	`border-radius`

Example

@use 'more-sass' as more;

.element-one {
  @include more.border-radius(1px 2px null 4px);
}

.element-two {
  @include more.border-radius(10px, 'cross-left');
}

.element-one {
  border-radius: 1px 2px 0 4px;
}

.element-two {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}