Search code examples
iphonesafarisubpixel

Can you have a 0.5px border on a Retina Display?

On Mobile Safari on an iPhone 4 or iPhone4S, can you have a border of a div that is 0.5px wide?

Solution

  • I wrote an overview of different techniques:

    Half-pixel border

    border: 0.5px solid black;

    Cons:

    • Works only in Firefox and Webkit Nightly.

    border-image

    border-width: 1px;
border-image: url(border.gif) 2 repeat;

    border.gif is a 6×6 pixel image:

    border image explained

    Pros:

    • It works!

    Cons:

    • An external image. It’s only 51 bytes and it can be inlined using Data URI. You’d need to fire up Photoshop (or whatever you use) to change the border color, which isn’t very convenient.

    Multiple background images

    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;

    “How to target physical pixels on retina screens with CSS” describes how to draw a line. Draw 4 lines and we have a border.

    Pros:

    • No external images.

    Cons:

    • Cumbersome syntax, although it can be abstracted out with CSS preprocessors.

    Scale up and down

    Mentioned here already by Priit Pirita.