creando bordes multicolores con css

la imagen proporcionada en la pregunta muestra un borde con múltiples colores. Este borde se puede crear sin usar pseudo-elementos, sino empleando la propiedad de imagen fronteriza junto con un gradiente lineal. Aquí se explica cómo lograrlo:

implementación de código

.fancy-border {
  width: 150px;
  height: 150px;
  text-align: center;
  border-top: 5px solid;
  border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%, red 50%, red 75%, teal 75%) 5;
}

  my content

explicación

en el código anterior fragmento:

• the width, altura y text-align, configure el tamaño y alineación del elemento div.
• La propiedad de la tapa del borde define el borde superior del div.
• La propiedad de la imagen del borde es la clave para crear el borde multicolor. Hace referencia a un gradiente lineal que abarca el ancho del borde, con colores que se alternan entre gris, amarillo, rojo y verde azulado.
• el 5 al final de la propiedad de imagen del borde representa el ancho del gradiente en píxeles.