AI solution for Interview Question on BFE.dev
113. How do you create retina hairline(0.5px line in CSS)?

To create a retina hairline or a 0.5px line in CSS, you can use CSS Transform property to scale horizontal and vertical values to 0.5. Here is an example:

.element {
  border-bottom: 1px solid black; /* original 1px line */
  transform: scaleY(0.5) scaleX(0.5); /* scale down the line */
  transform-origin: 0 0; /* set origin to top-left corner */
}

This code will create a thinner, retina-friendly line for the bottom border of .element. You can adjust the transform values to create thinner or thicker lines as needed. It's important to note that this technique may cause performance issues on older devices, so use it sparingly.