Gerillass
v2.1.0* 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. |
$value | number (with unit) | The 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);
}.element {
border-radius: 20px;
}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.
.element{
@include border-radius(top, 40px);
}.element {
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}Now, let's try to target right corners.
.element{
@include border-radius(right, 40px);
}.element {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}Now let's try the cross-left and cross-right values, which let you target the corners diagonally.
.element{
@include border-radius(cross-left, 40px);
}.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);
}.element {
border-radius: 25px 50px 100px 150px;
}Now let's pass four values again, but this time we are going to separate them with commas to try something different.
.element{
@include border-radius(25px, 50px, 100px, 150px);
}.element {
border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 150px;
}For each corner you can pass a second value next to the first one to bend the curve.
.element{
@include border-radius(100px 40px, 50px 20%, 100px 30%, 150px 2rem);
}.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);
}.element {
border-bottom-right-radius: 100px 30%;
border-bottom-left-radius: 150px 2rem;
}