Wizard Wizard - 3 months ago 44
CSS Question

CSS border less than 1px


Possible Duplicate:

HTML: Sub-pixel border




border:1px
is too big. I want to have have it half the size, but I do not know how to do this.
border: 0.5px solid;
does not work. I know there is a solution with
background img
, but with CSS it will be faster.

Answer

A pixel is the smallest unit value to render something with. But you can trick thickness with optical illusions by modifying colors. (The eye can only see to a certain resolution too.)

Here is a test to prove this point :

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">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>

Output

enter image description here

Which gives the illusion that the last DIV has a smaller border width, because the blue border blends more with the white background.

Comments