Skip to main content

Quick circle (by Adam Argyle)

Visit external resource

I’m wary of list-based clickbait – and Adam’s recent 6 CSS snippets every front-end developer should know in 2023 feels like that – however I like this modern and minimal approach to creating a circle. I’ve previously seen aspect-ratio: 1 used to create a square box and it’s a lovely shorthand for “make width and height equal”. It makes sense that you can use it for a circle too, just by adding some border-radius.

.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;

External Link Bookmark Note Entry Search