Border radius

Import

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.

Indeed:


.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:

Parameter	Description	Allowable value
$size	Defined is the size of the radius	`s`, `m`, `m`
$side	Specifies the side of the element where to apply the radius	`all`, `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');
}