Negative Borders

Install

# npm
npm i negative-borders

And then you can just use

import "negative-borders"

# cdn
<script type="module" src="https://cdn.jsdelivr.net/npm/negative-borders@1/negative-borders.js"></script>

Examples

https://codesandbox.io/p/sandbox/84tkpd

<div class="box" data-negative-borders data-negative-borders-size="50px" data-negative-borders-color="orange"></div>
<div
  class="box"
  data-negative-borders
  data-negative-borders-size="50px"
  data-negative-borders-color="orange"
  data-negative-borders-position="top"
></div>
<div
  class="box"
  data-negative-borders
  data-negative-borders-size="50px"
  data-negative-borders-color="orange"
  data-negative-borders-position="right"
></div>
<div
  class="box"
  data-negative-borders
  data-negative-borders-size="50px"
  data-negative-borders-color="orange"
  data-negative-borders-position="left"
></div>

<div
  class="box"
  data-negative-borders
  data-negative-borders-size="50px"
  data-negative-borders-color="orange"
  data-negative-borders-show-after="false"
></div>
<div
  class="box"
  data-negative-borders
  data-negative-borders-size="50px"
  data-negative-borders-color="orange"
  data-negative-borders-show-before="false"
></div>