PostCSS plugin that creates inner border like sintax using box-shadow
npm install postcss-inner-border[PostCSS] plugin that creates inner border like sintax using box-shadow.
#### Syntax
``css`
.foo {
border: inner [width] [color];
}
Of course, this plugin works fine with: border, border-top, border-bottom & border-right
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/inspiratweb/postcss-inner-border.svg
[ci]: https://travis-ci.org/inspiratweb/postcss-inner-border
`css`
.foo {
border: inner 2px #64ffda;
}`
Generatescss`
.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 💅
`css`
.foo {
border: inner 2px #64ffda;
box-shadow: 1px 0 0 0 #fabada;
}`
Generatescss`
.foo {
box-shadow: inset 0 0 0 2px #64ffda, 1px 0 0 0 #fabada;
}
`js``
postcss([ require('postcss-inner-border') ])
See [PostCSS] docs for examples for your environment.