We often receives requests from our customers asking us to fix/explain the problem of different thickness of the borders set in the container. Another question that is related to this problem: why do the borders of the line seem to be blurry? Let's get into this by looking on example:
In the image above it seems that border ① visually appears to be
2px thick and borders ② appears to be
1px thick. However, in the code we can observe these borders to be set as
1px for all sides. If we try to change the size of the container, then the problem becomes more noticeable and gives unpredictable results: the thickness of the border is sometimes bigger, then how it should be:
What is the cause and how to fix it?
One huge spoiler: a problem is in the desktop settings (Windows Display Settings → Scale and Layout Settings at 125%).
But first things first ...
With the advent of displays with high pixel density, it became necessary to scale the user interface of operating systems, because as the display resolution increased, the interface became visually smaller. To do this, a scaling function has been added to Windows OC, which by default is set to the recommended value of 125%.
What visually happens to the image on the display screen when zoomed to 125%?
Each pixel in the image is scaled 125%. In other words, it becomes not
1px wide, but
1.25px, which means that the image will not exactly fulfil (paint over) a physical pixel on the display screen.
Therefore, on some displays, the borders seem blurry, and on some, the "blurriness" is compensated by the operating system, by rounding the actual part to an integer — that is why we get an increased thickness of the border.
In our opinion, in the Windows operating system, scaling is implemented not quite correctly by default. It negatively affects on visualization of content.
What should we do to fix it?
We can offer the following troubleshooting:
Set the scaling to 100%, in this case each pixel of the image will correspond to the physical pixel of the display. This method has another side — you have to get used to the reduced interface of the operating system.
Try to enable the "Let Windows try to fix apps so they're not blurry" option in the "Advanced scaling settings":
3. Try to ignore this distortion. Please be kindly advised that in reality it does not exist and the recipients of your newsletter will see the correct width of borders for the elements of the email.
If you have any questions, please email us at firstname.lastname@example.org