Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled.
When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a faint line appearing on all other sides, but strangely, this occurs only on mobile devices.
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
To better understand the issue, compare the following CodePen on both a PC and a phone:
https://codepen.io/aradevich/pen/mdrLvqx
Screenshot: ellipse with 5px top border
This problem becomes particularly problematic in CSS art where it distorts facial features, as demonstrated by the eyes in this mobile example: https://codepen.io/aradevich/pen/qBaxQye?editors=1100
If anyone knows why this anomaly occurs and how to resolve it, I would greatly appreciate your assistance. Thank you!