.border {
  position: relative;
}

.border::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform-origin: 0 0;
  transform: scale(0.5);
  border-width: 0;
  border-style: solid;
  border-color: inherit;
  border-radius: inherit;
  pointer-events: none;
}

@media (-webkit-min-device-pixel-ratio: 3) {
  .border::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333);
  }
}

@media (-webkit-min-device-pixel-ratio: 4) {
  .border::after {
    width: 400%;
    height: 400%;
    transform: scale(0.25);
  }
}

.border-all::after {
  border-width: 1px;
}

.border-left::after {
  border-left-width: 1px;
}

.border-right::after {
  border-right-width: 1px;
}

.border-top::after {
  border-top-width: 1px;
}

.border-bottom::after {
  border-bottom-width: 1px;
}