On high-definition screens (Retina screens), 1px in CSS is often rendered into 2px or 3px of physical pixels, causing the border to look thick and unrefined.

In order to achieve a truly physical “Hairline”, the following mainstream solutions are usually used in front-end development.

---

1 . Pseudo class + transform: scale() 【 Most recommended, mainstream in the industry 】

This is currently the most compatible and widely used solution.

Principle: Use the ::before or ::after pseudo-element to create a container with a width and height of 200% (or 300%) of the parent element, set a 1px border, and then shrink it back to the original size through transform: scale(0.5).

Code Example (Sass/CSS):

.hairline-border {
  position: relative;
}

.hairline-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* 宽高设为 200% */
  width: 200%;
  height: 200%;
  border: 1px solid #d9d9d9;
  /* 缩小为 0.5 */
  transform: scale(0.5);
  transform-origin: 0 0; /* 缩放基点设为左上角 */
  box-sizing: border-box;
  pointer-events: none; /* 防止遮挡点击 */
  
  /* 如果需要圆角，记得圆角也要放大两倍 */
  border-radius: 8px; /* 假设原元素是4px */
}

• Advantages: Good compatibility, supports rounded corners (needs to be enlarged proportionally), applicable to full border or single border.
• Disadvantages: Occupies pseudo elements and requires slightly more code.

---

2 . background-image gradient 【 Suitable for single border 】

Use linear gradient linear-gradient to simulate lines.

Principle: Set the background gradient so that half is colored and half is transparent, then control background-size so that its height is only 1px (it will look thinner on a high-definition screen).

Code example (bottom border):

.hairline-bottom {
  background-image: linear-gradient(180deg, black 50%, transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

• Advantages: The code is concise and does not occupy pseudo elements.
• Disadvantages: Cannot achieve rounded corners, usually only used for single straight borders.

---

3 . border-image 【 Newer solution 】

Use SVG or image as border image.

Principle: Prepare a 1px x 1px image (or SVG) and fill it with border-image.

.border-image-1px {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

• Advantages: The syntax is relatively novel.
• Disadvantages: It is troublesome to modify the color (need to change the picture), does not support rounded corners.

---

4 . Viewport zoom 【 Old solution, not even recommended 】

Principle: In the meta tag of HTML, directly set the initial-scale of the page to 0.5 (for 2x screen) or 0.333 (for 3x screen).

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

• Advantages: Writing 1px in the page is equivalent to physical 1px, which reduces the mental burden on development.
• Disadvantages: One move affects the whole body.The layout and font size of the entire page need to be converted according to DPR (for example, the base value of 1rem needs to be changed), making it extremely difficult to transform old projects.It is rarely used now (it was used in the early Taobao mobile terminal).

---

5 . box-shadow simulation 【 Part of the scene 】

.box-shadow-1px {
  box-shadow: 0 -0.5px 0 red; /* 向上偏移 0.5px */
}

• Disadvantages: The color may become lighter, the edges may be blurred due to the browser's rendering mechanism, and the compatibility is not as good as the transform solution.

---

Summary and comparison

Solutions	Rounded Corner Support	Flexibility	Compatibility	Recommendation Index
Pseudo class + Transform	✅ (requires calculation)	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Preferred
Background Gradient	❌	⭐⭐⭐	⭐⭐⭐⭐	Second choice (straight lines only)
Border-image	❌	⭐⭐	⭐⭐⭐	General
Viewport Zoom	✅	⭐	⭐⭐	Not recommended
Box-shadow	✅	⭐⭐	⭐⭐	Not recommended