Change border thickness with CSS

When I'm having problems with the border pixels, instead of setting 1px solid black , I use thin solid black .

See (Zoom in on the browser to see 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 the Google Chrome browser:

When you set thin ("thin" in Portuguese) value, you are set to the minimum border size.

This value can be set separately in 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 definition in pixels accompanies the navigator zoom, whereas thin does not.

First of all, it is important to consider these two situations:

• In a normal configuration on a conventional monitor (HD or smaller), 1px is a "square" on the screen, you can not paint half of it. It would be like you asking "how do I switch on only half the lamp on my lamp?"

• On a HI-DPI monitor, things are a little different. Browsers group multiple 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 border, which would essentially change the code structure (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 left image has a white pixel as space. As it was too much space, on the right was a smaller space "simulated" 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 it can minimize the problem of the "thick" line.

The idea is that the "thin" 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 this "transparency" manually, the original color is FC0 , the background is FFF , then the 1st F was maintained, the 2nd was between C (we used F ), and the third between E and 0 , so we used F (I did not use exact calculations, just approached to facilitate).

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

(Pikachu credits to @GuilhermeNascimento, who "pixelizou" the original)

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 of being "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 site . 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 on on an SOen response