css para obter efeito de borda de quatro cantos

 <div
            classe = "caixa"
            v-for="(item, índice) em coldBaseInfo.stationModelList"
            :key="índice"
          >
            <div class="boxleft">
              <img :src="foto[index]" alt="Imagem" />
            </div>

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

 .boxesquerda {
  plano de fundo: gradiente linear (para a esquerda, #04C886, #04C886) canto superior esquerdo sem repetição,
        gradiente linear (para baixo, #04C886, #04C886) canto superior esquerdo sem repetição,
        gradiente linear (para a esquerda, #04C886, #04C886) canto superior direito sem repetição,
        gradiente linear (para baixo, #04C886, #04C886) canto superior direito sem repetição,
        gradiente linear (para a esquerda, #04C886, #04C886) inferior esquerdo sem repetição,
        gradiente linear (para baixo, #04C886, #04C886) fundo esquerdo sem repetição,
        gradiente linear (para a esquerda, #04C886, #04C886) inferior direito sem repetição,
        gradiente linear (para a esquerda, #04C886, #04C886) inferior direito sem repetição;
    tamanho de fundo: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  imagem {
    largura: 100%;
    altura: 100%;
    preenchimento: 4px;
    borda: 2px sólido #7fb1c580;
  } 
}