Pixel break creating false border

2

I do not know how to explain this situation. I created a tooltip using only CSS3 and HTML5. At normal size (100% zoom) on the left, the elements are blurred and there is a border around the tooltip (just under "Required!", Even with border: 0px; border-color: transparent; ). Already in enlarged size (zoom 200%), to the right, the elements present excellent clarity.

My theory is that edge pixels are compressed, which causes this visual defect. Can anyone tell me why this happens? And how to solve this?

    
asked by anonymous 24.09.2018 / 20:23

0 answers