Pixel Borders

Add pixelated borders to HTML elements and customize with different sizes, colours and styles.

Pixel Borders logo

Features

  • SASS, PostCSS and CSS
  • Four sizes
  • Colour themes
  • Highlight and shadow

Examples

Sizes

Colours

Highlight & Shadow

Installation

$ npm install pixel-borders --save-dev

Import the files into your project and add the elements to your markup.

SASS

The default version and used to generate the compiled CSS.

node_modules/pixel-borders/src/styles/pixel-borders/css/styles.css
node_modules/pixel-borders/src/styles/pixel-borders/sass/pixel-borders.css

PostCSS

Slightly different syntax to the SASS version and requires postcss-advanced-variables to work.

node_modules/pixel-borders/src/styles/pixel-borders/css/styles.css
node_modules/pixel-borders/src/styles/pixel-borders/postcss/pixel-borders.css

Compiled CSS

Pixel borders is mainly controlled using CSS variables however you will need to manually change the SVG fill colour for a custom border colour.

node_modules/pixel-borders/src/styles/pixel-borders.css

Markup

<button class="pixel-border pixel-borders--1">Press start 1p</button>

Compatibility

Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev

References

Inspired by NES.css and Pixel corners.