CSS border less than 1px [duplicate]

Asked 15/12, 2012 at 9:51 Answered 15/12, 2012 at 10:11

164

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?

Cuspid answered 15/12, 2012 at 9:51 Comment(12)

I think you don't understand how pixels work. This is like wanting a value size less than a bit. – Puddling 15/12, 2012 at 9:52

Ok I now understand that cant't be less that 1 px. – Cuspid 15/12, 2012 at 9:54

Well technically it can be because pixels are a relative unit of measurement. But that will probably turn your world-view upside down. – Unseemly 15/12, 2012 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. – Dapsang 15/12, 2012 at 11:29

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. – Puddling 15/12, 2012 at 15:7

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. – Compost 27/11, 2016 at 20:6

You can use 'scale' css property ;) – Watkin 29/11, 2016 at 7:19

You have to use scale: atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel – Ferren 24/1, 2017 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. – Selina 26/5, 2021 at 14:59

@Selina 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. – Puddling 27/5, 2021 at 3: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. – Selina 27/5, 2021 at 17:1

in case you are using white, try using this color #1C2127 – Franklynfrankness 7/9, 2023 at 8:11

235

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>

Puddling answered 15/12, 2012 at 10:11 Comment(14)

For anyone attempting to do this, but not sure how to blend your colors, I found this page really helpful: meyerweb.com/eric/tools/color-blend Just make sure you choose more than 1 midpoint, and pick your favorite. – Simarouba 26/7, 2013 at 6:20

In modern browsers, on UHD screens, sub-pixel widths are now possible. – Compost 27/11, 2016 at 20:8

@Compost please, elaborate. – Puddling 28/11, 2016 at 5: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 https://mcmap.net/q/151675/-html-sub-pixel-border for an illustration. – Compost 28/11, 2016 at 11:4

@Compost 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. – Puddling 28/11, 2016 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. – Compost 28/11, 2016 at 13:34

@Compost 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. – Puddling 28/11, 2016 at 15:1

@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. – Ferren 24/1, 2017 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. :) – Puddling 25/1, 2017 at 13:46

This is the smartest thing I've seen all day (granted I've been in my house coding all day) – Nedneda 23/2, 2017 at 22:6

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. – Headrick 25/4, 2021 at 5: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. :) – Puddling 26/4, 2021 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? – Tzong 30/5, 2021 at 2:22

ok, the alpha trick does seem like the way to go, at least for a grey border – Tzong 30/5, 2021 at 2:24

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.

Cadet answered 15/12, 2012 at 9:52 Comment(4)

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) – Puddling 15/12, 2012 at 9:57

This is no longer true. 0.5px is valid and it works. – Midships 19/12, 2018 at 1:8

@Midships Browser-dependent. Chrome 70 treats subpixel values as 1px, for instance, even on hidpi displays. – Cadet 19/12, 2018 at 1:18

This is not true on hidpi displays. 1px can translate into 2 or 3 physical device pixels. – Rheinland 21/6, 2019 at 16:41

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

Minority answered 15/12, 2012 at 9:54 Comment(1)

not working, Chromium 49 – Venita 31/3, 2016 at 13:27

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.

Teliospore answered 15/12, 2012 at 10:8 Comment(2)

But but, on retina... – Differ 15/11, 2014 at 10:30

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. – Pert 31/1, 2015 at 12:45

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Output

Edit: Alternate solution

Recommended topics

Hot tags