<div class="rainbow">
  White layer set to <code>border-box</code> <em>(default)</em>
</div>

<div class="rainbow" style="background-clip: padding-box, border-box">
  White layer set to <code>padding-box</code>
</div>

<div class="rainbow" style="background-clip: content-box, border-box">
  White layer set to <code>content-box</code>
</div>

:root {
  --angle: 45deg;
  --opacity: 0.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.rainbow {
  /* Size of the border */
  --border-size: 0.5rem;

  /* Create a dotted border */
  border: var(--border-size) dotted lime;

  /* Create two background layers:
	   1. A white semi-transparent
	   2. A layer with the colored boxes
	 */
  background-image: linear-gradient(
      to right,
      rgb(255 255 255 / var(--opacity)),
      rgb(255 255 255 / var(--opacity))
    ),
    conic-gradient(
      from var(--angle),
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    );

  /* Size backgrounds against border-box */
  background-origin: border-box;

  /* Other styles */
  max-width: 100%;
  width: 400px;
  aspect-ratio: 4/3;
  border-radius: 10px;
  padding: 2rem;

  display: grid;
  place-content: center;
  text-align: center;

  font-size: 1.5em;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding: 1em;
}

@media (max-width: 780px) {
  body {
    flex-direction: column;
  }
}