Half pixel border radius in retina

Question

When using a retina display, is it possible to use half-pixel border radius like this:

#box {
    height: 3px;
    width: 100px;
    border-radius: 1.5px;
}

I did it on my retina iPhone 4, and it shows up as a 1px border radius. Any reasons and/or fixes?

Answer 1

border measurements must be integer pixels (so 1.5 won't fly). But you can fake it by using the spread radius..

There are many examples in the wild, including this one:

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {

  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);   }

}