CSS para lograr el efecto de borde de cuatro esquinas.

 <div
            clase="caja"
            v-for="(elemento, índice) en coldBaseInfo.stationModelList"
            :clave="índice"
          >
            <div clase="boxleft">
              <img :src="foto[índice]" alt="Imagen" />
            </div>

 foto: [
        requerir("@/assets/img/bigscreen/two.jpg"),
        requerir("@/assets/img/bigscreen/four.png"),
        requerir("@/assets/img/bigscreen/five.jpg"),
        requerir("@/assets/img/bigscreen/ten.jpg"),
      ],

 .boxleft {
  fondo: gradiente lineal (a la izquierda, #04C886, #04C886) arriba a la izquierda sin repetición,
        gradiente lineal (hacia abajo, #04C886, #04C886) arriba izquierda sin repetición,
        gradiente lineal (a la izquierda, #04C886, #04C886) arriba a la derecha sin repetición,
        gradiente lineal (hacia abajo, #04C886, #04C886) arriba derecha sin repetición,
        gradiente lineal (a la izquierda, #04C886, #04C886) parte inferior izquierda sin repetición,
        gradiente lineal (hasta abajo, #04C886, #04C886) parte inferior izquierda sin repetición,
        gradiente lineal (a la izquierda, #04C886, #04C886) parte inferior derecha sin repetición,
        gradiente lineal (a la izquierda, #04C886, #04C886) parte inferior derecha sin repetición;
    tamaño de fondo: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  imagen {
    ancho: 100%;
    altura: 100%;
    relleno: 4px;
    borde: 2px sólido #7fb1c580;
  } 
}