<div></div>
<div></div>
<div class="repeat" data-repeat="stretch"></div>
<div class="repeat" data-repeat="round"></div>
<div class="repeat" data-repeat="repeat"></div>
<div class="repeat" data-repeat="space"></div>
<div class="repeat" data-repeat="stretch space"></div>
<div class="repeat" data-repeat="round stretch"></div>
<div class="repeat" data-repeat="repeat space"></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: linear-gradient(270deg, #dbe40f, #9613a9, #7d9081, #90300c, #d71abf), url(http://cs.astronomy.com/cfs-file.ashx/__key/telligent-evolution-components-attachments/13-59-00-00-00-48-94-80/orion_5F00_wide_5F00_field.jpg), linear-gradient(270deg, #430fe4, #234ae8, #15a32d, #f55519, #d71abf);
  --mask: url(//www.w3cplus.com/sites/default/files/blogs/2019/1905/mask-border-image.png);
}

body {
  width: 100vw;
  height: 100vh;
  background-image:var(--bg);
  background-blend-mode: hard-light, screen, overlay;
  animation: hueRotate 20s ease-in-out infinite;
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  place-items: center;
}

@keyframes hueRotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

div {
  height: 0;
  width: 100%;
  padding-top: 100%;
  background-color: #fff;
  
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(0,0,0, .35);
  border: 10px solid rgba(0,0,0, .35);
}

div:nth-child(2) {
  background:#fff var(--mask) no-repeat center;
}

.repeat {
  background-image: linear-gradient(to right, #f37, #90d);
  mask-border-source: var(--mask);
  mask-border-width: 27px;
  mask-border-slice: 27;
  mask-border-outset: 20px;
  mix-blend-mode: screen;
  filter: hue-rotate(135deg);
  
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2vh;
    text-shadow: 1px 1px 1px rgba(0,0,0,.35);
    white-space: nowrap;
    mix-blend-mode: difference;
  }
  
  &[data-repeat="stretch"] {
    mask-border-repeat: stretch;
  }
  
  &[data-repeat="round"] {
    mask-border-repeat: round;
  }
  
  &[data-repeat="repeat"] {
    mask-border-repeat: repeat;
  }
  
  &[data-repeat="space"]{
    mask-border-repeat: space;
  }
  
  &[data-repeat="stretch space"] {
    mask-border-repeat:stretch space;
  }
  
  &[data-repeat="round stretch"] {
    mask-border-repeat:round stretch;
  }
  
  &[data-repeat="repeat space"]{
    mask-border-repeat:repeat space;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.