Post Aw1l9ZPd1NPEG8rgtk by krinkle@fosstodon.org
 (DIR) More posts by krinkle@fosstodon.org
 (DIR) Post #Aw1IINYdZJwnQbvWzo by krinkle@fosstodon.org
       2025-07-11T07:32:31Z
       
       0 likes, 0 repeats
       
       When applying a thick border all around an element in more than one color, the corners meet in a 45-degree angle, forming a diamond of sorts. That is established and seems reasonable.But, when you apply a thick edge on one side, with a thin 1px border all around, this border gets squeezed into a slope, and won't reach the edge!This is more noticable with todays high-DPI screens. It is rather unsatisfying, and hard to unsee...Example:https://en.wikipedia.org/wiki/Template:Cleanup#css #WebDesign #WebStandards
       
 (DIR) Post #Aw1IIP4Zw35k7xsYQC by SuperDicq@minidisc.tokyo
       2025-07-11T09:44:13.203Z
       
       0 likes, 0 repeats
       
       @krinkle@fosstodon.org This is obviously a problem with your browser rendering stack, not with the CSS or the website.The CSS literally says it is supposed to be 1 pixel. Why the hell does it render more than 1 pixel? The screen being "high-DPI" is not an excuse. 1 pixel = 1 pixel.The browser should do exactly what the CSS tells it to do, not whatever this is.
       
 (DIR) Post #Aw1Ia3io3bJ17X780e by SuperDicq@minidisc.tokyo
       2025-07-11T09:47:27.782Z
       
       0 likes, 0 repeats
       
       @krinkle@fosstodon.org If I wanted the border to be more than 1 pixel on a high resolution display I would've given it "1 rem" or something, if I make it 1 pixel I expect it to be always 1 pixel.
       
 (DIR) Post #Aw1J78I85VdQqjPHg8 by phnt@fluffytail.org
       2025-07-11T09:53:30.661221Z
       
       0 likes, 1 repeats
       
       @SuperDicq @krinkle I think that by the screenshots, the browser is Firefox and Firefox has buggy rendering in many weird edge cases. I had an unordered list and wanted to apply a bigger top margin only for the first element in that list using :first-child. Firefox couldn't cope with it and applied that bigger margin to all elements instead.
       
 (DIR) Post #Aw1l9ZPd1NPEG8rgtk by krinkle@fosstodon.org
       2025-07-11T15:03:20Z
       
       1 likes, 0 repeats
       
       @phnt @SuperDicq It renders the same in Firefox, Chrome, and Safari. And happens without HiDPI too, just less obvious until you zoom.The top border is exactly 1px at all times. The color of that 1px transitions from grey to yellow, at an angle, the same way that it does for the thick orange/blue example.20px/1px should render the same as 200px/10px, right?Our brain seems to like it in some cases and dislike in others.