On Retina devices, 1px borders can appear thicker than expected because Retina displays have a higher pixel density, causing a single CSS pixel to be represented by multiple physical pixels.
To create thinner borders, often referred to as "Retina hairlines" or 0.5px lines, you can use following CSS techniques —
1. Using CSS Gradients: You can create a thin border effect by using a linear gradient background on an element. This gives the appearance of a thin line without relying on actual pixel dimensions. Here's an example:
<pre class="shiki github-dark shaku"><code>.thin-border { width: 100px; height: 100px; background: linear-gradient(to right, red, red) 0 50% / 100% 0.5px no-repeat;}</code></pre>
2. Using CSS Transform Scale: You can use the <code>transform</code> property to scale an element down to achieve a thinner border. Since it's a scaling transformation, it will appear thinner even on Retina displays. Here's an example:
<pre class="shiki github-dark shaku"><code>.thin-border { border: 1px solid #000; transform: scale(0.5); transform-origin: 0 0;}</code></pre>
3. Using Box Shadows: Another way to create a 0.5px line is to use the <code>box-shadow</code> property:
<pre class="shiki github-dark shaku"><code>.thin-border { box-shadow: 0 0 0.5px #000;}</code></pre>
4. Using Pseudo-elements: You can also use pseudo-elements to create thinner borders. Here's an example using the <code>::before</code> pseudo-element:
<pre class="shiki github-dark shaku"><code>.thin-border { position: relative;}.thin-border::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0.5px; background-color: #000;}</code></pre>

super thin borders

When you write 1px in CSS, you would find it seems to be thicker on Retina devices than you thought. How would create more thin borders (retina hairli…