How to make a border lower than 1px?

Question

Can I make a border with CSS lower than 1px? Because in my layout it got too thick.

Answer 1

First of all, important to consider these two situations:

• In standard configuration on conventional monitor (HD or smaller), 1px is a "little square" on the canvas, there is no way to paint half of it. It would be like you ask "how do I light only half the lamp of my lamp?"

• On a HI-DPI monitor, it’s a little different. The browsers group several pixels into a larger "logical pixel", so there is the "half pixel". But since almost the CSS specification for these cases is inconsistent, there is no safe way to use this "half pixel" directly with CSS. It would be necessary to use images to produce this edge, which would essentially change the structure of the code (and would only have effect on high-density monitors).

What you can do in a much simpler way, is to simulate smaller thickness using an approximation, with transparency or intermediate color calculation:

The image on the left has a white pixel as space. As it was too much space, on the right was "simulated" a smaller space using a gray instead of the original white, giving less space illusion.

Applying this same concept to border with CSS:

div {margin:10px;width:150px;float:left}
br {clear:both}
#pxA2 {border-bottom:2px solid rgb(255,200,0);}
#pxA1 {border-bottom:1px solid rgb(255,200,0);}
#pxAM {border-bottom:1px solid rgba(255,200,0,.5);}
#pxB2 {border-bottom:2px solid #FC0;}
#pxB1 {border-bottom:1px solid #FC0;}
#pxBM {border-bottom:1px solid #FE9;}

<br>Com transparência:<br>
<div id="pxA2">2</div>
<div id="pxA1">1</div>
<div id="pxAM">+-.5 (simulado)</div>
<br>Com cores:<br>
<div id="pxB2">2</div>
<div id="pxB1">1</div>
<div id="pxBM">+-.5 (simulado)</div>

As you can see, it is far from ideal, but can minimize a little the problem of the "thickness" of the line.

The idea is that the "thinner" line has a color corresponding to a percentage of the original color, and a percentage of the background color.

In example 1, the color is the same 255, 0, 0, but in the "half pixel" we use . 5 in alpha (transparency):

#pxA1 {border-bottom:1px solid rgb(255,200,0);}
#pxAM {border-bottom:1px solid rgba(255,200,0,.5);}

In example 2, we made such "transparency" manually, the original color is FC0, the background is FFF, then the first F remained, the 2nd was between the C and the F (we use E), and the third between 0 and F, then we use 9 (I did not use exact calculations, I only approached to facilitate).

#pxB1 {border-bottom:1px solid #FC0;}
#pxBM {border-bottom:1px solid #FE9;}

(credits from Pikachu to @Guilhermenascimento, who "pixelized" the original)

Answer 2

No. There is no way to do something with less than 1px, at first a pixel is the smallest unit of measure to render something on the screen.

You can try to do some tricks using transparency, a less intense color will give that impression to be "thinner".

div { border-color: blue; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160, 160, 255); }

<div class="b1">Borda 1</div>
<div class="b2">Borda 2</div>
<div class="b3">Borda 3</div>
<div class="b4">Borda 4</div>

You can create a color for this trick, on this website. See an example with the red border.

div { border-color: #FF0000; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: #FF8B8B; }

<div class="b1">Borda 1</div>
<div class="b2">Borda 2</div>
<div class="b3">Borda 3</div>
<div class="b4">Borda 4</div>

Based in a reply from Soen

Answer 3

When I’m having problems in the pixels of border, rather than define 1px solid black, i use thin solid black.

See (Zoom in on the browser to notice the difference):

.px-border{
    border:1px solid black;
    height: 50px;
    width: 50px;
}

.thin-border {
   border:thin solid black;
   height: 50px;
   width: 50px;
}

<div class="px-border"></div>
<div class="thin-border"></div>

See the result with 500% zoom in Google Chrome browser:

When you define value thin ("thin" in English), you are set that the edge size will be the minimum possible.

This value can be set separately in the property border-width, border-left-width, border-right-with, border-top-width and border-bottom-width.

Note that a difference between thin and the property defined in pixels is that, visibly, the pixel setting accompanies the browser zoom, already the thin, nay.