Jump to content

Fix for Chrome not rendering 1px borders

Posted in CSS/SASS · 1 minute read

This happened to me couple of times - borders would just randomly disappear in Chrome. All other browsers render them normally, but they just vanish in Chrome, on some screen sizes. Resizing helps sometimes, but I never was able to catch real pattern for reproducing.

If this ever happens to you, there is a (hacky) solution. Change border width from 1px to thin.

border: 1px solid #000;
/* change it to: */
border: thin solid #000;

Although I don't like it, as it is a hacky workaround and I don't really understand why it works, it does solve the issue.

It seems that I'm not the only one having this problem.

Comments (4)

19. July 2020
Levi

Annnnd chrome just "fixed" this bug too in Chrome 42, so now thin = 1px and borders are uneven once again at anything other than 100% native zoom :(

13. March 2020
Alexander

Confirmed it works yeyy

14. February 2020
André

Fantastic!! Thanks

9. February 2020
Jimmie D Reed

hey. found this via google.. WORKED!!