JSFiddle - React, Tailwind, and code Playground

by Sir_Moustache

HTML

<div class="block">

</div>

SCSS

$border-offset: 20px;
$border-width: 10px;

.block {
  width: 200px;
  height: 200px;
  background: 
    linear-gradient(tomato, tomato), 
    linear-gradient(green, green), 
    linear-gradient(blue, blue), 
    linear-gradient(pink, pink);
  background-size: 
    calc(100% - #{$border-offset} * 2) $border-width, 
    $border-width calc(100% - #{$border-offset} * 2),
    calc(100% - #{$border-offset} * 2) $border-width, 
    $border-width calc(100% - #{$border-offset} * 2);
  background-repeat: no-repeat;
  background-position: 
    $border-offset 0,
    0 $border-offset,
    $border-offset 100%,
    100% $border-offset;
}