How does the border px work?

Question

Here's a little weird thing happening.

When I set

border-bottom: 0.5px;

and

border-bottom: 1px;

I can see the difference in my computer. But when I do use the same system inside an online editor like codepen, I cannot see any difference.

Here is a little snippet for you guys to see it:

.teste {
display: inline-block;
width: 10vw;
height: 10px;
}

.teste1 {

border-bottom: 0.1px solid black;

}

.teste2 {

border-bottom: 0.4px solid black;

}

.teste3 {

border-bottom: 0.5px solid black;

}

.teste4 {

border-bottom: 1px solid black;

}

.teste5 {

border-bottom: 1.5px solid black;

}

.teste6 {

border-bottom: 2px solid black;

}

<div class="teste teste1"> </div>
<div class="teste teste2"> </div>
<div class="teste teste3"> </div>
<div class="teste teste4"> </div>
<div class="teste teste5"> </div>
<div class="teste teste6"> </div>

The only differente will be visible for me in this snippet are those with 1px and 1.5px.

So, here is my question:

How does the DOM works with those measures? Does it sees the difference between 0.1px and 0.5px?

If I can see the difference in my screen, will my visitors see it as well?

Answer 1

If to consider browser agnostic web site design you should assume that fractional px values are rounded to nearest integer.

Dimensions of elements reported by HTML DOM API are always in "DOM pixels" - numbers rounded up to nearest integer. Distances between elements are always expressed in whole number of "DOM pixels".

So things like 1.25px make not too much sense in web design.

"DOM pixel" is a logical length unit loosely equal to 1/96 of inch. Like on 110 PPI monitor 1px equals to 1 physical pixel. But on 192 PPI monitor one 1px maps to 2 physical pixels.

Modern DOM and CSS have no means to address physical pixel units.

AFAIR it was an attempt to introduce "hairline" units but I think they will not go through.

Answer 2

Some Browers add user-agent styles to elements that sometimes create slight variations. I'm using chrome it seems to render the borders just fine.

Try zooming in closer and you will see the difference