Frontend

CSS Border Font

Every letter in this "font" by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic

CC

Chris CoyierCSS-Tricks

·February 28, 2021·Links

CSS Border Font: A Single Div Per Letter

Davor Suljic has built an entire “font” where every letter is a single div, rendered purely with the border property. The technique leans on border-radius with unusual syntax, such as border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0;, which rounds only the top of an element in a way that works well for letterforms, plus pseudo-elements for additional shapes.

Variations with colors, shadows, and border styles push the limits of what CSS can express, and the results are deliberately playful.

Drawing With CSS: A Longstanding Obsession

Building visual objects in CSS has been a persistent interest for developers. Icons are a go-to subject, exemplified by Nicolas Gallagher’s 2010 Pure CSS GUI icons — showing that many shapes are achievable in CSS without even using the powerful clip-path property.

As Lynn Fisher’s work demonstrates, working with a single div is less a true limitation and more a creative challenge.