Border Radius

Type: Mixin

@include border-radius();

* You can call mixins with or without gls- namespace (e.g. @include gls-border-radius();).

Border Radius Sass mixin helps you to rounds the corner(s) of a selected element by using the border-radius CSS property. You can pass one value (with the unit) to style all the corners equally or you can use CSS shorthand property to style each corner differently. For more see the examples.

Github Source Code

Arguments

Name	Type	Description
`$corner`	`string`	It allows you to choose the corners of an element that you want to apply style rules. Accepts the following values: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, `cross-left`, `cross-right`, `all`.
`$value`	`number (with unit)`	Size of the border radius that will be applied.

Examples

Simply pass a value to target all the corners of an element and style them equally.

.element{
  @include border-radius(20px);
}

//CSS Output
.element {
  border-radius: 20px;
}

Now, let’s pass two values: first one is top to target only top corners of a selected element and second one is 40px for the size of the radius.

.element{
  @include border-radius(top, 40px);
}

//CSS Output
.element {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

Now, let’s try to target right corners.

Just to remind you once more these are the predefined values to target the corners: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left, cross-left, cross-right, all.

.element{
  @include border-radius(right, 40px);
}

//CSS Output
.element {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

Now let’s try the cross-left or cross-right values so that you can target the corners diagonally.

.element{
  @include border-radius(cross-left, 40px);
}

//CSS Output
.element {
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

You can use the CSS shorthand method to pass different radius size values for different corners.

.element{
  @include border-radius(25px 50px 100px 150px);
}

//CSS Output
.element {
  border-radius: 25px 50px 100px 150px;
}

Now, let’s pass four values again but this time we’re going to seperate them by comma to try something different.

.element{
  @include border-radius(25px, 50px, 100px, 150px);
}

//CSS Output
.element {
  border-top-left-radius: 25px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 150px;
}

For each argument you can pass a second argument next to it to bend the curve.

.element{
  @include border-radius(100px 40px, 50px 20%, 100px 30%, 150px 2rem);
}

//CSS Output
.element {
  border-top-left-radius: 100px 40px;
  border-top-right-radius: 50px 20%;
  border-bottom-right-radius: 100px 30%;
  border-bottom-left-radius: 150px 2rem;
}

Use null to skip a corner!

.element{
  @include border-radius(null, null, 100px 30%, 150px 2rem);
}

//CSS Output
.element {
  border-bottom-right-radius: 100px 30%;
  border-bottom-left-radius: 150px 2rem;
}