We often receive requests from our customers asking us to fix/explain the problem of different thicknesses of the borders set in the container. Another question that is related to this problem is: why do the borders of the line seem to be blurry? Let's get into this by looking at the 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 than 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%).
Windows scaling:
With the advent of displays with high pixel density, it became necessary to scale the operating system user interface because as the display resolution increased, the interface became visually smaller. To do this, a scaling function has been added to Windows OC, which is set to the recommended value of 125% by default.
What visually happens to the image on the display screen when zoomed to 125%?
Each pixel in the image is scaled at 125%. In other words, it becomes not 1px wide, but 1.25px, which means that the image will not exactly fulfill (paint over) a physical pixel on the display screen.
Therefore, on some displays, the borders seem blurry. 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 border thickness.
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 image pixel 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.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.