Skip to content

Instantly share code, notes, and snippets.

@w0rm
Last active August 29, 2015 14:01
Show Gist options
  • Save w0rm/c0dd4b7aed71acc03900 to your computer and use it in GitHub Desktop.
Save w0rm/c0dd4b7aed71acc03900 to your computer and use it in GitHub Desktop.
Draw borders with linear gradients, supports width of 0.5px for retina screens
// 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)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment