CODEWITHSUNDEEP
htmlcssfirefox
Adam Baranyai
Adam Baranyai

Reputation: 3867

Border is less than 1 pixel, how is this happening?

I have an input box on my page <input class='cv-input cv-dashboard-input'>, with the following rules defined:

input.cv-dashboard-input {
    font-family: Roboto;
    font-weight: 300;
    color: #004d6f;
    border: 1px solid #adadad;
    border-radius: 0px;
    font-size: 14px;
    transition: all 0.3s;
    margin: 0;
    box-sizing: border-box;
}

input.cv-input {
    height: 42px;
    width: 100%;
    padding: 5px;
    font-family: Roboto;
    font-weight: 300;
}

When I inspect this element in Firefox, and check the computed sizes of it, it states, that my border width is 0.583333px. I tought that the minimum render size is 1 px, so how is this happening?

Here is a screenshot about what I see when I inspect the element in Firefox

I am using Firefox 54.0.1 (32-bit)

Upvotes: 2

Views: 6533

Answers (1)

Win
Win

Reputation: 5584

It is indeed possible to render 0.5px when using CSS. The answer to the question is simply that a px in CSS does not always translate to one pixel on the computed properties because it can be impacted by the screen density. You can read more about it here: https://www.w3.org/TR/CSS21/syndata.html#length-units

I would like to mention that I am using a hi-dpi screen which may explain why my computed properties are very accurate.

The top one has a border-top-width of 0.5 pixels.

Top has a border-top-width of 0.5px whilst the bottom is 1px all the way round.

The top input's computed properties

Upvotes: 5

Related Questions