Specify hairline thickness in CSS for printing

Question

If I have a print CSS styling an element with:

border:1px solid black;

or:

border:0.25pt solid black;

The lin

Answer 1

Nowadays, in 2015, there are a few workarounds to produce hairlines with HTML5 and CSS3, e.g. for printing or on high res screens:

1. SVG (i.e., by assigning a path stroke-width: .5)
2. linear gradient backgrounds
3. 2D transforms: scaling

The scaling approach is described in detail in this article. It boils down to this:

hr.thin {
    height: 1px;
    border-top: none;
    border-bottom: 1px solid black;
    transform: scaleY(0.33);
}

The linear gradient method works along these lines (pun intended, in detail here):

hr.hairline {
    height: 1px;
    background: linear-gradient(
        transparent 0%, 
        transparent 50%, 
        black 50%, 
        black 100%);
}

To simplify things, I have used a 1px

---

element as an example. But by scaling all styles within an element, or with multiple backgrounds respectively, both solutions may be expanded to work as a border on all four sides of an element.