157

Possible Duplicate:
HTML: Sub-pixel border

The default border:1px is too big. However, border: 0.5px solid; is not working. Is there a CSS solution that would make the border half the size?

SK98
  • 7
  • 2
Wizard
  • 10,985
  • 38
  • 91
  • 165
  • 26
    I think you don't understand how pixels work. This is like wanting a value size less than a bit. – Yanick Rochon Dec 15 '12 at 09:52
  • 5
    Ok I now understand that cant't be less that 1 px. – Wizard Dec 15 '12 at 09:54
  • 8
    Well technically it can be because pixels are a relative unit of measurement. But that will probably turn your world-view upside down. – hakre Dec 15 '12 at 11:20
  • well you can attempt to have something that looks like that tricking the human eye with very finely done semi transparent borders or even better box-shadows , but they will all round off to a 1 device-pixel in order to render. – ShrekOverflow Dec 15 '12 at 11:29
  • 5
    I voted this question for reopening because the "exact duplicate" does not give a concrete solution to this issue. It does explain the "ipx minimum" limitation, but does not give a workaround solution. – Yanick Rochon Dec 15 '12 at 15:07
  • 6
    Pixel widths less than 1px are now possible on UHD screens (in modern browsers, at least). Given that this question doesn't specify browser compatibility, surely this could be reopened to allow an answer that addresses this. – verism Nov 27 '16 at 20:06
  • 1
    You can use 'scale' css property ;) – Andrii Bogachenko Nov 29 '16 at 07:19
  • You have to use scale: http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/ – Thomas Ahle Jan 24 '17 at 19:47
  • @YanickRochon in iPhone 12 there are 1170 real physical pixels in a row but in CSS these pixels correspond to 390 viewport css pixels. In CSS a pixel is not a pixel, it's an abstract measurement unit. And it doesn't correspond to cm/inches either. And besides, there's also scaling with Ctrl+plus. – Gherman May 26 '21 at 14:59
  • @Gherman as far as I'm concerned, that's an aberration. The operating system may substitute the physical pixels with something else, or provide a different unit (e.g. `em`) the idea of "real physical pixels" and "viewport css pixels" is only platform dependent. Just like how OpenGL provides an abstraction of the display area. The vast majority of devices use physical pixels and, until new technologies are released, this will still be the case for most use cases. – Yanick Rochon May 27 '21 at 03:50
  • @YanickRochon Computers and programming are full of aberrations, abstractions, emulations, translations and implementation-dependent features. We developers have to cope with them because that's our job. As a web-developer I do not have a say in how browsers function. I work with whatever I got. Specifically the UX-guy asked me to make a border less than 1px and that's how I got here. That guy makes decisions and I must follow. – Gherman May 27 '21 at 17:01

4 Answers4

222

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>
Community
  • 1
  • 1
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
  • 18
    For anyone attempting to do this, but not sure how to blend your colors, I found this page really helpful: http://meyerweb.com/eric/tools/color-blend/ Just make sure you choose more than 1 midpoint, and pick your favorite. – Taj Morton Jul 26 '13 at 06:20
  • 1
    In modern browsers, on UHD screens, sub-pixel widths are now possible. – verism Nov 27 '16 at 20:08
  • @verism please, elaborate. – Yanick Rochon Nov 28 '16 at 05:19
  • @YanickRochon Specifying a border width of less than 1px will result in sub-pixel rendering on UHD screens on modern browsers. It's difficult to illustrate much more, given this topic is now closed, but see my answer at http://stackoverflow.com/a/40833470/1600679 for an illustration. – verism Nov 28 '16 at 11:04
  • @verism perhaps, but I honestly don't see much difference between `0.5px and `0.25px`, and it doesn't work on UHD screens (as you mentioned). The vast majority of users do not have those screens, so your solution may only be truly practical in a few years... At the moment, this answer be be the only viable solution. I will also add a solution with a `rgba()` alternative, to prevent calculating RGB values. – Yanick Rochon Nov 28 '16 at 13:16
  • There are no discernible differences between 0.75, 0.5 or 0.25px - I included them to illustrate the way different values are handled. The point was to show that sub-pixel rendering _is_ possible, in some - not all - cases. The screenshot is from a UHD screen, so I'm not sure why you say it doesn't work. – verism Nov 28 '16 at 13:34
  • @verism in your screenshot, I see 4 rectangles (like in my examples), but only the top one looks different. The other 3 looks quite similar, even if they're supposed to represent 75%, 50%, or 25% of a pixel; I just don't find it compelling, or perhaps this technique really needs improvement. In any case, sub-pixels will always be a hack, simply because of hardware (physical) limitations. It's still interesting, but not really applicable right now. – Yanick Rochon Nov 28 '16 at 15:01
  • 2
    @Yanik Most users today are mobile, and most mobile devices are certainly high resolution. It is frustrating to not be able to specify "0.5px", and this question will certainly be visited a lot more until the issue is fixed. – Thomas Ahle Jan 24 '17 at 19:43
  • @ThomasAhle indeed, however I do not think that anyone will be able to use `0.5px` at all. Other units may be used, but it's deceiving, really. Truth be told, until displays aren't pixel-based anymore (i.e. and use some kind of "true vision" future tech), we are bound to pixels because of hardware limitations. Alpha blending and retina display are nothing but hacks over the current technology, to offer better image quality, but on the programming side, sub-pixels are always hacks. Personally, I do not try to hide this fact and tell the programmers the real thing, instead of some utopia. :) – Yanick Rochon Jan 25 '17 at 13:46
  • This is the smartest thing I've seen all day (granted I've been in my house coding all day) – krummens Feb 23 '17 at 22:06
  • This could be quite a frustrating answer for some - the trick has nothing to do with colour at all. All that is required is manipulating the alpha value of any arbitrary colour swatch, and yet alpha was proposed as an alternative option despite being the exact thing driving the initial answer. – Richard Jones Apr 25 '21 at 05:18
  • @RichardJones the differences between the first example and the alternative one are: 1) using `rgb(r,g,b)` requires manually calculating the correct "arbitrary" color to simulate sub-pixel borders, 2) using `rgb(r,g,b)` may not look well (or not at all) with certain color combination. Whereas using `rgba(r,b,g,a)` : 1) only requires a single ajudtement of the alpha component, 2) blends the color with the background, also called alpha blending, a technique used by every graphic engine. Sub-pixel is physically impossible, but there are ways around it. This is what this answer is all about. :) – Yanick Rochon Apr 26 '21 at 12:19
  • Not exactly sure what I am looking at other than a fourth border with a lighter color and not with some illusion of smaller perceived border? – Michael Ramos May 30 '21 at 02:22
  • ok, the alpha trick does seem like the way to go, at least for a grey border – Michael Ramos May 30 '21 at 02:24
6

It's impossible to draw a line on screen that's thinner than one pixel. Try using a more subtle color for the border instead.

  • 7
    Using a more contrasted border will give a impression of more thickness, while a color more blending (fading) to you background will give an impression of lightness (thinner) – Yanick Rochon Dec 15 '12 at 09:57
  • 1
    This is no longer true. 0.5px is valid and it works. – Vincent Dec 19 '18 at 01:08
  • @Vincent Browser-dependent. Chrome 70 treats subpixel values as 1px, for instance, even on hidpi displays. –  Dec 19 '18 at 01:18
  • 1
    This is not true on hidpi displays. 1px can translate into 2 or 3 physical device pixels. – Roman Zenka Jun 21 '19 at 16:41
2

try giving border in % for exapmle 0.1% according to your need.

Gagan Deep
  • 489
  • 1
  • 4
  • 16
2

The minimum width that your screen can display is 1 pixel. So its impossible to display less then 1px. 1 pixels can only have 1 color and cannot be split up.

Sharpless512
  • 3,062
  • 5
  • 35
  • 60
  • 8
    But but, on retina... – pronebird Nov 15 '14 at 10:30
  • 3
    My browser does render an input box with a border that is thinner than the 1 pixel HTML borders (retina display). As far as I know, the HTML 1px borders are actually scaled to two retina pixels but the CSS spec does not have options to control such behavior. – Roy Prins Jan 31 '15 at 12:45