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

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

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

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

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

[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(0.5);
  transform: scaleY(0.5); }

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

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

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

[data-border-color="#e5e5e6"]::before,
[data-border-color="#e5e5e6"]::after {
  background-color: #e5e5e6; }

[data-border-color="#eeeeee"]::before,
[data-border-color="#eeeeee"]::after {
  background-color: #eeeeee; }

[data-border-color="#cfcfcf"]::before,
[data-border-color="#cfcfcf"]::after {
  background-color: #cfcfcf; }