postcss-dotted-border

PostCSS plugin to change the spacing between dots of dotted border by using linear-gradient.

Usage no npm install needed!

<script type="module">
  import postcssDottedBorder from 'https://cdn.skypack.dev/postcss-dotted-border';
</script>

README

postcss-dotted-border Build Status

PostCSS plugin to change the spacing between dots of dotted border by using linear-gradient.

You can use four property.

  • dotted-border-top: border-width || border-height || spacing || border-color;
  • dotted-border-right: border-width || border-height || spacing || border-color;
  • dotted-border-bottom: border-width || border-height || spacing || border-color;
  • dotted-border-left: border-width || border-height || spacing || border-color;
//before
.aaa {
  dotted-border-top: 1px 1px 4px #000;
}
.bbb {
  dotted-border-right: 1px 1px 4px #000;
}
.ccc {
  dotted-border-bottom: 1px 1px 4px #000;
}
.ddd {
  dotted-border-left: 1px 1px 4px #000;
}

//after
.aaa {
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
  background-size: 5px 1px;
  background-position: top;
  background-repeat: repeat-x;
}
.bbb {
  background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
  background-size: 1px 5px;
  background-position: right;
  background-repeat: repeat-y;
}
.ccc {
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 4px);
  background-size: 5px 1px;
  background-position: bottom;
  background-repeat: repeat-x;
}
.ddd {
  background-image: linear-gradient(to bottom, #000, #000 1px, transparent 1px, transparent 4px);
  background-size: 1px 5px;
  background-position: left;
  background-repeat: repeat-y;
}

Usage

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

Install

npm install postcss-dotted-border