@property --s {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

.map {
  --t: 3px;
  /* control the thickness (corner = 3*edge) */
  --s: 40px;
  /* control the size of the corners (that also affect the size of the edges) */
  --g: 8px;
  /* control the gap */
  --c: black;

  padding: calc(2*var(--t) + var(--g));
  border: var(--t) solid black;
  background:
    conic-gradient(at var(--s) calc(3*var(--t)), #0000 75%, var(--c) 0) 0 0/calc(100% - var(--s)) calc(100% - 3*var(--t)) border-box,
    conic-gradient(at calc(3*var(--t)) var(--s), #0000 75%, var(--c) 0) 0 0/calc(100% - 3*var(--t)) calc(100% - var(--s)) border-box,
    linear-gradient(0deg, var(--c) calc(2*var(--t)), #0000 0) 50% var(--t)/calc(100% - 2*(var(--s) + var(--g))) 100% repeat-y padding-box,
    linear-gradient(-90deg, var(--c) calc(2*var(--t)), #0000 0) var(--t) 50%/100% calc(100% - 2*(var(--s) + var(--g))) repeat-x padding-box;
  transition: --s .5s;
  cursor: pointer;
}

.map:hover {
  --s: 300px;
}

/* delete or edit below*/
.map.active {
  --t: 3px;
  /* control the thickness (corner = 3*edge) */
  --s: 40px;
  /* control the size of the corners (that also affect the size of the edges) */
  --g: 8px;
  /* control the gap */
  --c: white;

  padding: calc(2*var(--t) + var(--g));
  border: var(--t) solid white;
  background:
    conic-gradient(at var(--s) calc(3*var(--t)), #ffffff00 75%, var(--c) 0) 0 0/calc(100% - var(--s)) calc(100% - 3*var(--t)) border-box,
    conic-gradient(at calc(3*var(--t)) var(--s), #ffffff00 75%, var(--c) 0) 0 0/calc(100% - 3*var(--t)) calc(100% - var(--s)) border-box,
    linear-gradient(0deg, var(--c) calc(2*var(--t)), #ffffff00 0) 50% var(--t)/calc(100% - 2*(var(--s) + var(--g))) 100% repeat-y padding-box,
    linear-gradient(-90deg, var(--c) calc(2*var(--t)), #ffffff00 0) var(--t) 50%/100% calc(100% - 2*(var(--s) + var(--g))) repeat-x padding-box;
  transition: --s .5s;
  cursor: pointer;
}

.map.active:hover {
  --s: 300px;
}

@media (max-width: 768px) {
  .map:hover {
    --s: 90px;
  }

  .map.active:hover {
    --s: 90px;
    /* Adjust the value for smaller screens */
  }
}