CODEWITHSUNDEEP
htmlcsssafari
Ismail Moghul
Ismail Moghul

Reputation: 2984

border not pixel perfect in Safari

At genevalidator.sbcs.qmul.ac.uk, the main body div has a border. It has been noted that this is not pixel perfect on Safari version = 7.1 (9537.85.10.17.1).

I'm not too sure why this is. Please take a look at the top of the picture below.

Border css

border: 7.5px solid #5e5e5e;
border-radius: 15px

Picture

enter image description here

Upvotes: 0

Views: 325

Answers (2)

Valentin Mercier
Valentin Mercier

Reputation: 5326

There is not such thing as 7.5px. It is unfortunately impossible to render a specific color on half a pixel. Either use 

border: 8px solid #5e5e5e;

or

border: 7px solid #5e5e5e;

Tested on the mentioned Safari version, and it worked like a charm, whereas 7.5px made a 1px imperfection on the top border;

Upvotes: 2

Rob
Rob

Reputation: 15160

Pixel perfection on the web is difficult enough but to also specify half pixels makes it even more difficult. I don't recall how browsers act in such cases, they all round differently in different cases, but you don't give enough information as to what the exact change is and I don't have Safari available to me to double check.

However, there is this answered question about Safari not applying border-radius properly to images as noted here: Rounded cornes (border radius) Safari issue

Upvotes: 0

Related Questions