CSS border less than 1px

Question

Possible duplicate:
HTML: subpixel frame

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

Answer 1

A pixel is the smallest unit value to render. But you can fool the thickness with optical illusions by changing colors. (The eye can see only a specific resolution .)

Here is a test to prove it:

 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> 

Exit

This gives the illusion that the last DIV has a smaller border width because the blue border shifts more with the white background.

---

Edit: alternative solution

Alpha values ​​can also be used to simulate the same effect without the need to calculate and manipulate RGB values.

 .container { border-style: solid; border-width: 1px; margin-bottom: 10px; } .border-100 { border-color: rgba(0,0,255,1); } .border-75 { border-color: rgba(0,0,255,0.75); } .border-50 { border-color: rgba(0,0,255,0.5); } .border-25 { border-color: rgba(0,0,255,0.25); } 

 <div class="container border-100">Container 1 (alpha = 1)</div> <div class="container border-75">Container 2 (alpha = 0.75)</div> <div class="container border-50">Container 3 (alpha = 0.5)</div> <div class="container border-25">Container 4 (alpha = 0.25)</div> 

Answer 2

It is not possible to draw a line on a screen that is thinner than one pixel. Instead, try using a finer color for the frame.

Answer 3

try to provide a% border for exapmle 0.1% according to your needs.

Answer 4

The minimum width your screen can display is 1 pixel. Therefore, it cannot be displayed less than 1px. 1 pixel can have only 1 color and cannot be divided.

Answer 5

You can still define the border attribute and give it a value of 0 pixels, useful when one side needs this value.

Examples:

 .box1 { border: 1px solid black; border-left: 0; } .box2 { border-color: black; border-style: solid; border-width: 1px 1px 1px 0; }