<div class="rainbow"></div>

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

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

.rainbow {
  width: 400px;
  height: 300px;
  border-radius: 10px;
  padding: 2rem;
  margin: auto;

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

  font-size: 1.5em;

  /* 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 / 0.5),
      rgb(255 255 255 / 0.5)
    ),
    conic-gradient(
      from 45deg,
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    );

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

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

body {
  display: grid;
  place-content: center;
  gap: 0.5em;

  text-align: center;
  line-height: 1.42;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}