CSS border-width:1px doesn't give me equally thin borders

Question

I am trying add thin borders to a div. My CSS is like this:

border: solid;
border-width: 1px;

Yet the result borders don\'t look e

Answer 1

Your monitor is set to a non-native resolution. (Windows 8) Right click on your desktop, click "Screen Resolution" and then select the recommended resolution.

Answer 2

I have same problem. After some research I found out it's caused by 1.5 device pixel ratio (Windows 8.1 set scale everything to 150%).

Solution is to set sale to 100% but it makes texts supertiny so I can't use this solution.

Both IE(11) and Chrome are affected. Firefox is OK.

Same issue is goes for mobile phones and tablets:

mobile safari rendering buttons with border

Uneven border in mobile browsers

Answer 3

You likely have other elements to the left and below the box and may be accidentally applying borders to them as well to make it appear that they have "double" borders.

Make sure you isolate the box and try again.

A 1px border can't be uneven like you are displaying.