SVG Halftone Borders

Inspiration

I recently started a screenprinting class at the local art school and fell in love with the physical printing process, and the freedom and opportunity for happy mistakes that it allows. In particular, I found myself interested in the halftone pattern, which we all are likely aware of (even if we don’t know the name) thanks to pop art. Perhaps the most prominent pop artist to use them was Roy Lichtenstein. I’ve also been enjoying Ben Rider’s screenprint work, and noticed that he sometimes uses halftone patterns as a decorative part of a larger whole, or other times as a border, like in his Liz poster in the Leake Street Mural . So all off this was in my head, and all the while I’ve always found a border on a webpage fun (so much so that my very first portfolio was nothing but borders within borders).

Question

How can we make a halftone border around a webpage?

Process

I know that gradient and image borders via CSS are a thing, so let’s start there. My first attempt was to use a radial gradient as the border-image-source, essentially making a Frankenstein border combining the CSS halftone path suggested by Michelle Barker¹ and the gradient border path suggested by Chris Coyier². However, after making it work with border-image: it is not browser-friendly. Chromium browsers work fine, but Firefox gets weird and Safari doesn’t work at all.

This write-up is still in process :)

References

1. Michelle Barker, CSS Halftone Patterns
2. Chris Coyier, Gradient Borders in CSS