Border radius


In order to use the border-radius values provided by Mozaic, you have to import the _all-settings.scss file:

// mandatory
@import 'settings-tools/all-settings';

Basic usage

Once you have imported the all-settings file, you can now use the border-radius values in your code, as follows:

.example {
border-radus: get-border-radius('l');

Radius values

As a reminder, Mozaic offers you three sizes of border-radius:

  • Small: 2px
  • Medium: 4px
  • Large: 6px

The set-border-radius() mixin

The set-border-radius mixin allows you to generate the entire CSS rule without the need to explicitly write the border-radius: property in your code.


.example {
border-radus: get-border-radius('s');

is the equivalent of:

.example {
@include set-border-radius('s');

The $side parameter

The set-border-radius() mixin allows the use of two parameters:

ParameterDescriptionAllowable value
$sizeDefined is the size of the radiuss, m, m
$sideSpecifies the side of the element where to apply the radiusall, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right

Therefore, if, for example, you want to apply your radius only to the top two sides of your element, you can do so in the following way:

.example {
@include set-border-radius('s', 'top');