view source

Shorthand for using a single border value on multiple sides of an element.

mixin only
  1. $style

    A vanilla-CSS border shorthand value for the border you wish to create.

  2. $sides
    n y

    The sides on which to add your border: a list of 2 or 4. n abbreviates null, passing no value; y (or anything other than n), will create a rule. See below for details.

The $sides argument determines which sides get the border. It parallels the established pattern in vanilla CSS: if a list of two is passed, the first value applies to top and bottom, the second to right and left; if a list of four is passed, the values apply, in order, to top, right, bottom, and left.

As elsewhere in Scut, n stands for null and results in no rule being created. For scut-border, y (or anything other than n) stands for "yes" or true and will result in a rule. See the examples below.

(If you don't see the purpose or value of such a silly little shorthand, please read the explanation in scut-margin, which applies equally to this mixin.)



.eg-border-1 {
  @include scut-border(5px solid, y n);
.eg-border-2 {
  @include scut-border(0.5em solid $eg-light, n y);
.eg-border-3 {
  @include scut-border(10px solid $eg-dark, y y n n);
.eg-border-4 {
  @include scut-border(0.75em solid $eg-dark, n n y y);
  @include scut-border(0.75em solid $eg-light, y y n n);


Variation 1
Variation 2
Variation 3
Variation 4