Line thickness of 0.5px (1 real pixel) on a retina display in mobile safari

Question

How can I draw a line with mobile safari that is one real pixel wide on a retina display?

I tried:

border-bottom:0.5px solid #fff;

and

border-bottom:0.05em solid #fff;

with different values between 0.01em and 0.1em.

Mobile Safari always draws a line that is one pixel wide (2 pixels on a retina display) or none at all. How can I make mobile safari draw a line that is one real pixel (0.5px) wide ?

@sheriffderek: Thanks for the tip. Tried it with differen em values, but it didn't work. Either safari showed a 1px wide line (2 real px) or none at all. — Teetrinker, Jul 24 '13 at 07:58
I found this, but I also read that iOS6 doesnt play nice. http://bradbirdsall.com/mobile-web-in-high-resolution — sheriffderek, Jul 24 '13 at 17:18
Here is a talk about pixels: http://www.youtube.com/watch?v=4wscVOXjIzQ#at=324 — sheriffderek, Jul 24 '13 at 17:21
@sheriffderek: thanks for the research. I'll take a look at the video as soon as possible. The first link doesn't make me hopefull. Seems to be an almost hopeless case - except using tweaks like the one mentioned. — Teetrinker, Jul 25 '13 at 10:03
possible duplicate of [Can you have a 0.5px border on a Retina Display?](http://stackoverflow.com/questions/8640521/can-you-have-a-0-5px-border-on-a-retina-display) — NVI, Jan 08 '14 at 08:02
It's a duplicate. But the answer to the other question was not sufficient, the answer here is currently the best one. — Teetrinker, Jan 09 '14 at 10:39

score 4 · Accepted Answer · answered Sep 25 '13 at 06:37

4

Use scale. The style below will give you hairline

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

More specificly (and that trick in live use) here http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

answered Sep 25 '13 at 06:37

Priit Pirita

191
2
6

Did not have the time yet to fully read the article - but that seems to be it! Thanks. – Teetrinker Oct 14 '13 at 17:15

score 2 · Answer 2 · answered Sep 29 '14 at 10:07

Use `border-width: 0.5px`

Safari 8 (in both iOS and OS X) brings border-width: 0.5px. You can use that if you’re ready to accept that current versions of Android and old versions of iOS and OS X will just show a regular border (a fair compromise in my opinion).

You can’t use this directly though, because browsers that don’t know about 0.5px borders will interpret it as 0px. No border. So what you need to do is add a class to your <html> element when it is supported:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

Then, using retina hairlines becomes really easy:

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

Best of all, you can use border-radius with it. And you can use it with the 4 borders (top/right/bottom/left) as easily.

Source: http://dieulot.net/css-retina-hairline

score 1 · Answer 3 · answered Jul 23 '13 at 16:28

1

I don't normally suggest using .5 in pixels ever really. But you want a fallback to it.

just place the fallback on top. Like this.

border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;

answered Jul 23 '13 at 16:28

HeyImArt

498
3
9
24

Actually, I am not looking for a fallback. I am looking for a way to print a 1-real-pixel wide line on the iPhone screen. – Teetrinker Jul 23 '13 at 17:10
1

but you would want some sort of fall-back - so that It could be seen on the desktop, right? – sheriffderek Jul 24 '13 at 17:19
1

Well, it makes sense to have a fallback. But before I need a fallback I need a working solution. – Teetrinker Jul 25 '13 at 10:04

score 0 · Answer 4 · answered Oct 08 '21 at 22:06

Warning: Many phones are now 3x (3 real pixels for each logical pixel).

Therefore 0.5px mathematically equates to 1.5 real pixels - which is impossible to render consistently.

So if you're trying to put a 0.5px border around something it's physically impossible for it to be consistent. Now the browser may decide to always round it to 1 real pixel or 2 real pixels OR it may try to anti-alias it. Unfortunately not even 'thin' as a thickness renders as one device pixel.

The worse case scanerio is it will use 1 pixel on one edge and 2 pixels on another which will end up looking awful. So be sure to keep this in mind and test on a 3x phone.

Line thickness of 0.5px (1 real pixel) on a retina display in mobile safari

4 Answers4

Use border-width: 0.5px

Use `border-width: 0.5px`