Gerillass: Border Radius Sass Mixin

Border Radius

Type: Mixin

@include border-radius();

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

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

Arguments

Name	Type	Description
`$corner`	string	Lets you choose which corners of an element you want to style. Accepts the following values: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, `cross-left`, `cross-right`, `all`. The logical corners `start-start`, `start-end`, `end-start` and `end-end`, named block side first, and the logical edges `inline-start`, `inline-end`, `block-start` and `block-end` follow the writing direction instead.
`$value`	number (with unit)	The size of the border radius that will be applied. Accepts a length, a percentage, `var()` or a maths function. Alone, one radius for every corner can be up to four radii and a slash, as the `border-radius` property takes; after a corner name, or as one of four radii, it is one radius or two for an elliptical corner. A CSS-wide keyword works as the whole value.

Examples

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

Sass

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

CSS

.element {
  border-radius: 20px;
}

Result

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

Sass

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

CSS

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

Result

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

Now, let's try to target right corners.

Sass

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

CSS

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

Result

Now let's try the cross-left and cross-right values, which let you target the corners diagonally.

Sass

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

CSS

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

Result

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

Sass

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

CSS

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

Result

Now let's pass four values again, but this time we are going to separate them with commas to try something different.

Sass

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

CSS

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

Result

For each corner you can pass a second value next to the first one to bend the curve.

Sass

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

CSS

.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;
}

Result

Use null to skip a corner!

Sass

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

CSS

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

Result

Logical corners and edges follow the writing direction. inline-start rounds the side where lines begin: the left in a left-to-right layout, the right in a right-to-left one, from the same rule. Measured in Chrome 152, every logical name renders the same radii as its physical twin in both directions.

Sass

.tab {
  @include border-radius("inline-start", 16px);
}

CSS

.tab {
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
}

Result

What it refuses

A radius the browser drops stops the build. Measured in Chrome 152, border-radius and the corner properties drop a negative radius, a word such as auto, a unit that is not a length, and more radii than they take: four for the whole box, two for one corner. Until 2.3.1 these compiled.

Sass

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

Error: `auto` is not a valid radius for `border-radius`: it is not a length. A browser drops the declaration.

Border Radius

Arguments

Examples

What it refuses

Related Links