0

I tried:

border: 0.5px solid #efefef;
border-radius: 5px;

Result: only rounded corners line can not see

So I wonder 0.5px line works on mobile display.

I already have a UI with 0.5px lines and rounded corners and this works fine: it's looks ok

Why do some things work well and others not?

I don't want a CSS Tricks, So I modify border line to 1px. but I wonder why this happens

I would really appreciate it if you could help me

Sunny
  • 1
  • 2
  • Check out this topic, which discusses the same issue: https://stackoverflow.com/questions/20116132/half-pixel-in-border-width-size-it-is-not-showing – ralph.m Jul 05 '23 at 03:50
  • Does this answer your question? [Half pixel in border width size it is not showing](https://stackoverflow.com/questions/20116132/half-pixel-in-border-width-size-it-is-not-showing) – ralph.m Jul 05 '23 at 03:50
  • Does the result alter if you zoom in or out? – A Haworth Jul 05 '23 at 05:33
  • I tried your code on an iPad and the border rounds OK. What sort of screen are you using and browser/OS? @ralph.m statement that you can’t have a half pixel is incorrect especially on modern screens where several screen pixels make up one CSS pixel. – A Haworth Jul 05 '23 at 05:39
  • @ralph.m thanks for comment! I thought that even 0.5px could be shown because of the retina display of mobile devices. (In 2x display, line will be 1px, right?) So I still have a question. Why can't I just see the rounded corner lines? – Sunny Jul 05 '23 at 05:42
  • @AHaworth thanks for comment! zoom in/out does not change the result. The problem is with IOS, but I don't know the version. (When I also tested on IOS 14.2 and 16.5.1, I confirmed it was OK) – Sunny Jul 05 '23 at 06:32
  • Do you think 0.5px renders as 1px on a retina display? Could this problem be due to OS version or browser or something? – Sunny Jul 05 '23 at 06:34
  • My test was on IOS 16 and the 0.5px rounded corners showed OK. – A Haworth Jul 05 '23 at 07:23

0 Answers0