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

            }

        }