CSS Embossed Border (SCSS mixin)

How to use?

1. @import "border-emboss";

• @include border-emboss();

Demo

Codepen Demo

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);
}