HTML elements rendering with sizes that don't match the CSS declarations -

HTML elements rendering with sizes that don't match the CSS declarations -

i trying understand why html elements render in sizes don't match specified css. illustration have declaration in css:

.productselectorslist > div { border-bottom-width: 1px;}

however, when @ element in browser dev tools when element renders in google chrome shows:

border-bottom-width: 1.1111111640930176px;

this sort of size difference on place in rendered code. appears starts in dom 1 time start including borders. 1 time happens virtually every element has unusual sizes don't match specified in css.

how can prepare sizes integers?

that happens when zoom out 90%.

the border still rendered whole pixel while "logical pixels" smaller whole pixel. style adjusted 1/0.90 = 1.111111 becomes whole pixel when scaled down.

html css