tldr; you can create razor-thin lines for retina displays using CSS, but it takes some hackery. retinahairlinegenerator.com is a site I built for quickly selecting a color and getting the CSS code for a retina hairline.
Last year Thomas Fuchs published a detailed look at how to create a web app that looks like a native iOS7 app. He revealed a great trick for creating single-retina-pixel “hairline” images. These razor-thin lines can be used as section dividers, to underline headings, to draw boxes, and much more.
The approach is beautiful in its simplicity: 1px in CSS represents two retina (real) pixels, therefore we can create an image in PhotoShop that is 2 x 1 pixels. We make one of those pixels transparent, and set the other to the color we need for our hairline. Once we’ve got our image, we can save it as a PNG, and then inline it as a base64-encoded image in our CSS.
This works great, and the code to generate the above is easy for a one-off.
But if you get feedback and need to change the shade or color of the line, you have to redo all that work from the start again: fire up PhotoShop, edit that image, save it out again, fire up ruby (or get hold of another programmer’s tool) and re-base64-encode the image. Finally, paste in the base64 data into the exact background CSS properties, (and don’t forget the data URI prefix).
Wouldn’t it be better if you could use a color visually and interactively, see how it looks on screen, and copy the final CSS in one click? That’s why I built retinahairlinegenerator.com, to help you quickly generate and regenerate a retina hairline for your mobile sites, emails or retina MacBooks. Enjoy!
UPDATE 3/16/2014: @smfr reports that WebKit nightlies can now do hairline borders directly in CSS! Use border-width: 0.5px for a retina-sharp pixel.
If you have other awesome retina CSS hacks, please share them in the comments below.
