background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
background-size: 120% 1px;
background-repeat: no-repeat;
background-position-y:calc(0% - 0.2rem);
background-origin: content-box;
.border {
width: 50px;
height: 50px;
margin: 50px;
border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio:1),
(min-device-pixel-ratio:1) {
.border {
border: 1px solid green
}
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5) {
.border {
border: 0.7px solid red
}
}
@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2) {
.border {
border: 0.5px solid yellow
}
}
@media (-webkit-min-device-pixel-ratio:3),
(min-device-pixel-ratio:3) {
.border {
border: 0.333px solid blue
}
}
