CSS border less than 1px [duplicate]

by

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 up 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.

Edit: Alternate solution

Alpha values may 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>

More Related Contents:

  1. what does "/" mean in css border-radius property? [duplicate]
  2. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  3. Border Gradient with Border Radius
  4. How to remove the border highlight on an input text element
  5. How can I show only corner borders?
  6. Any way to declare a size/partial border to a box?
  7. CSS triangle custom border color
  8. Invert rounded corner in CSS?
  9. CSS Property Border-Color Not Working
  10. Control the dashed border stroke length and distance between strokes
  11. CSS: Margin-top when parent’s got no border
  12. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  13. Hover effect : expand bottom border
  14. How to create multi-color border with CSS?
  15. How does border-image work with linear-gradient?
  16. Should I use ‘border: none’ or ‘border: 0’?
  17. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  18. Border within border CSS
  19. What is the difference between outline and border CSS properties?
  20. Two color borders
  21. How to create multiple borders around existing border of circle [duplicate]
  22. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  23. Removing the image border in Chrome/IE9
  24. CSS hover border makes elements adjust slightly
  25. Creating space between an element and its border
  26. text flowing out of div
  27. Combining border-top,border-right,border-left,border-bottom in CSS
  28. Drawing border colors during a CSS transition
  29. input type=”image” shows unwanted border in Chrome and broken link in IE7
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment