Border-emboss

How to use?

1. @import "border-emboss";
2. @include border-emboss();

Demo

See the Pen JomEEe by Vasiliy Lazarev (@Belyash) on CodePen.

Customize

$base

Base color for border.

$lighter

Lighter color (patch of reflected light).

$darker

Darker color for side with shadow.

$darkest

The darkest color for side with shadow, if has been set then the shadow will be emulate as from vertical light(from top to bottom).

$width

Width of border (separately for darker, lighter and base color).

$radius

Border radius.

$width2

Width of outer side of border. If not set then equals $width.

$width3

Width of inner side of border. If not set then equals $width.

Examples

.default {
  @include border-emboss(#666, #888, #444);
}
.rounded {
  @include border-emboss(#666, #888, #444, $radius: 10px, $width: 10px);
}
.vertical {
  @include border-emboss(#666, #888, #444, #222, $width: 10px);
}
.circle {
  @include border-emboss(#666, #888, #444, $radius: 50px, $width: 10px);
}