PostCSS Inner Border

PostCSS plugin that creates inner border like sintax using box-shadow.

Syntax

.foo {
    border: inner [width] [color];
}

Of course, this plugin works fine with: border, border-top, border-bottom & border-right

.foo {
    border: inner 2px #64ffda;
}

Generates

.foo {
  box-shadow: inset 0 0 0 2px #64ffda;
}

Can I use border-* rules?

Of course, this plugin works fine with: border, border-top, border-bottom & border-right

Can I use RGBA/HSL/HSLA colors?

Yes!

I have already a box-shadow rule

No problem, it will be added to the resulting rule, here is an example 💅

.foo {
    border: inner 2px #64ffda;
    box-shadow: 1px 0 0 0 #fabada;
}

Generates

.foo {
  box-shadow: inset 0 0 0 2px #64ffda, 1px 0 0 0 #fabada;
}

Usage

postcss([ require('postcss-inner-border') ])

See PostCSS docs for examples for your environment.