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

@layer base, demo;

@layer demo {
  .container {
    border-width: 2rem;
    border-style: dotted;
    border-color: grey;
    border-image-source: url("https://images.unsplash.com/photo-1558244661-d248897f7bc4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYxMTE5MjA&ixlib=rb-1.2.1&q=80");
    border-image-repeat: repeat;
    border-image-slice: 100;

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

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