NES Style Pixel Borders In Pure CSS/SASS – pixel-borders

Preview:

Description:

A SASS mixin applies customizable NES-style pixelate borders to elements inspired by NES.css.

How to use it:

Install & download.

# NPM
$ npm install pixel-borders --save

Import the pixel-borders.

@import "/path/to/pixel-borders.scss";

Customize the pixel borders using the following parameters:

@include pixel-borders(
  $corner-size: 1,                 
  $border-size: 4px,              
  $border-color: #000,            
  $border-inset-color: false
);
@include pixel-box(
  $corner-size,
  $border-size, 
  $background-color,              
  $border-color: false,           
  $border-inset: true,            
  $border-inset-size: false,      
  $border-inset-color: false,     
  $border-inset-sides: false,
  $border-inset-color-br: false,
  $border-inset-color-tl: false
);

Add the CSS class pixel-borders to the target element.

<div class="pixel-borders pixel-borders--custom">Pixel border</div>