<div class="container"></div>

@layer base, demo;

@layer demo {
  .container {
    border-width: 2rem;
    border-style: dotted;
    border-color: grey;
    border-image-source: repeating-linear-gradient(
      15deg,
      #900000,
      #ee2400,
      #ffb09c 2rem
    );
    border-image-repeat: repeat;
    border-image-slice: 100 75;

    height: 250px;
    width: 250px;
  }
}

@layer base {
  body {
    display: grid;
    place-items: center;
    height: 100vh;
  }
}