border-radius.md

_border-radius.scss

File includes mixins which help to keep consistent border radiuses.

List of content:

• Mixin border-radius (bootstrap 4.0.0)
• Mixin border-top-radius (bootstrap 4.0.0)
• Mixin border-right-radius (bootstrap 4.0.0)
• Mixin border-bottom-radius (bootstrap 4.0.0)
• Mixin border-left-radius (bootstrap 4.0.0)

Default variables

Default variables declared in file to be used in mixins.

$border-radius: 5px !default;
$enable-rounded: true !default;

Mixin border-radius

Description

Mixin which uses variable $enable-rounded. If it's true - borders will be rounded. Otherwise - it won't do anything.

Parameters

• $radius - defines properties of wanted border radius (default $border-radius)

Usage:

Assign border radius with 10px value

.exampleBorderClass {
    @include border-radius (10px);
}

Mixin border-top-radius

Description

Mixin which uses variable $enable-rounded. If it's true - top border will be rounded. Otherwise - it won't do anything.

Parameters

• $radius - defines properties wanted properties for top border radius (required)

Usage:

Assign top border radius with 3px value

.exampleTopBorderClass {
    @include border-top-radius (3px);
}

Mixin border-right-radius

Description

Mixin which uses variable $enable-rounded. If it's true - right borders will be rounded. Otherwise - it won't do anything.

Parameters

• $radius - defines wanted properties for right border radius

Usage:

Assign right border radius with 12px value

.exampleRightBorderClass {
    @include border-right-radius (12px);
}

Mixin border-bottom-radius

Description

Mixin which uses variable $enable-rounded. If it's true - bottom borders will be rounded. Otherwise - it won't do anything.

Parameters

• $radius - defines wanted properties for bottom border radius

Usage:

Assign bottom border radius with 30px value

.exampleBottomBorderClass {
    @include border-bottom-radius (30px);
}

Mixin border-left-radius

Description

Mixin which uses variable $enable-rounded. If it's true - left borders will be rounded. Otherwise - it won't do anything.

Parameters

• $radius - defines wanted properties for left border radius

Usage:

Assign left border radius with default value (5px)

.exampleLeftBorderClass {
    @include border-left-radius ();
}