.bd,
.bdtop,
.bdleft,
.bdright,
.bdbottom {
    position: relative;
}

.bd::before {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    content: "";
}

.bdtop::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    -webkit-transform-origin: center top;
            transform-origin: center top;
    content: "";
}

.bdleft::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    -webkit-transform-origin: left center;
            transform-origin: left center;
    content: "";
}

.bdright::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    -webkit-transform-origin: right center;
            transform-origin: right center;
    content: "";
}

.bdbottom::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    content: "";
}

[data-dpr="1"] .bd::before {
    width: 100%;
    height: 100%;
}

[data-dpr="2"] .bd::before {
    width: 200%;
    height: 200%;
}

[data-dpr="3"] .bd::before {
    width: 300%;
    height: 300%;
}

[data-dpr="1"] .bdtop::before,
[data-dpr="1"] .bdbottom::after {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
}

[data-dpr="1"] .bdleft::before,
[data-dpr="1"] .bdright::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}

[data-dpr="2"] .bdtop::before,
[data-dpr="2"] .bdbottom::after {
    -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
}

[data-dpr="2"] .bdleft::before,
[data-dpr="2"] .bdright::after {
    -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
}

[data-dpr="3"] .bdtop::before,
[data-dpr="3"] .bdbottom::after {
    -webkit-transform: scaleY(.33333);
            transform: scaleY(.33333);
}

[data-dpr="3"] .bdleft::before,
[data-dpr="3"] .bdright::after {
    -webkit-transform: scaleX(.33333);
            transform: scaleX(.33333);
}

[data-dpr="1"] .bd::before {
    -webkit-transform: scale(1);
            transform: scale(1);
}

[data-dpr="2"] .bd::before {
    -webkit-transform: scale(.5);
            transform: scale(.5);
}

[data-dpr="3"] .bd::before {
    -webkit-transform: scale(.33333);
            transform: scale(.33333);
}