css для достижения эффекта четырехугольной границы

 <дел
            класс="коробка"
            v-for="(элемент, индекс) в coldBaseInfo.stationModelList"
            :key="индекс"
          >
            <div class="boxleft">
              <img :src="photo[index]" alt="Изображение" />
            </div>

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

 .boxleft {
  фон: линейный градиент (влево, #04C886, #04C886) слева вверху без повтора,
        линейный градиент (вниз, #04C886, #04C886) слева вверху без повтора,
        линейный градиент (влево, #04C886, #04C886) справа вверху, без повтора,
        линейный градиент (вниз, #04C886, #04C886) справа вверху без повтора,
        линейный градиент (слева, #04C886, #04C886) слева внизу без повтора,
        линейный градиент (вниз, #04C886, #04C886) слева внизу без повтора,
        линейный градиент (влево, #04C886, #04C886) справа внизу без повтора,
        линейный градиент (влево, #04C886, #04C886) справа внизу, без повтора;
    размер фона: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  изображение {
    ширина: 100%;
    высота: 100%;
    отступ: 4 пикселя;
    граница: сплошная 2 пикселя #7fb1c580;
  } 
}