How to draw a 0.5 pixel border

method one

Set border directly: 0.5px solid #ccc;
Advantages: simple code
Disadvantages: not compatible with Android

Method Two

border: 1px solid #ccc;
transform: scale(0.5);
Advantages: simple code
Disadvantages: poor display effect on Android

Method three

        /* 盒子 */
         .box {
    
    
             position: relative;
             width: 300px;
             height: 200px;
             border-radius: 4px;
             /* background-color: red; */
         }
         .box::after {
    
    
             content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 200%;
              height: 200%;
              border-radius: 8px;
              border: 1px solid royalblue;
              transform: scale(0.5);
              transform-origin: 0 0;
              pointer-events: none;
         }

Advantages: compatible with ios and Android, and good display effect
Disadvantages: more code, slightly complicated

display effect