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

.div {
  width: 100%;
  height: 100px;

  background-image: repeating-linear-gradient(
      0deg,
      #64b3f4,
      #64b3f4 10px,
      transparent 10px,
      transparent 20px,
      #64b3f4 20px
    ),
      repeating-linear-gradient(
        90deg,
        #64b3f4,
        #64b3f4 10px,
        transparent 10px,
        transparent 20px,
        #64b3f4 20px
      ),
      repeating-linear-gradient(
        180deg,
        #64b3f4,
        #64b3f4 10px,
        transparent 10px,
        transparent 20px,
        #64b3f4 20px
      ),
      repeating-linear-gradient(
        270deg,
        #64b3f4,
        #64b3f4 10px,
        transparent 10px,
        transparent 20px,
        #64b3f4 20px
      );

  background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px; /*点線の太さ */
  background-position: 0 0, 0 0, 100% 0, 0 100%; /* 背景の開始位置を指定 */
  background-repeat: no-repeat; /* 繰り返さない */
}