Draw borders with linear gradients, supports width of 0.5px for retina screens

background-borders.scss

// This mixin is used to ease workaround explained in this article
// http://n12v.com/css-retina-and-physical-pixels/

// Creates linear gradient for specified border
@function border-gradient($side, $color: currentColor, $width: 0.5px) {
  @if $side == top {
    @return linear-gradient(180deg, $color, $color 50%, transparent 50%) top left / 100% #{$width * 2} no-repeat;
  }  @else if $side == bottom {
    @return linear-gradient(0, $color, $color 50%, transparent 50%) bottom right / 100% #{$width * 2} no-repeat;
  } @else if $side == left {
    @return linear-gradient(-90deg, $color, $color 50%, transparent 50%) bottom left / #{$width * 2} 100% no-repeat;
  } @else if $side == right {
    @return linear-gradient(90deg, $color, $color 50%, transparent 50%) top right / #{$width * 2} 100% no-repeat;
  }
}

// Includes background definition for borders
@mixin background-borders($sides, $color: currentColor, $width: 0.5px) {
  $result: ();
  @each $side in $sides {
    $result: append($result, unquote(border-gradient($side, $color, $width)), comma);
  }
  background: $result;
}

// Usage
div {
  @include background-borders(top bottom, red)
}