688: Modern CSS Round-Out Tabs, OpenUI, and Why Websites?

October 27, 2025

55 min episode · 2 min read

Chris Quire

Episode

55 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓CSS Shape Primitive: The new `shape()` function replaces `path()` with CSS-native syntax supporting pixels, rems, calc, and variables—enabling flexible tab designs where curves adjust automatically to content width and height using mixed static and calculated coordinates.
✓Single-Direction Overflow Control: CSS now supports `overflow-inline: auto` combined with `overflow-block: clip` to enable horizontal scrolling while preventing vertical overflow, solving previously impossible layout scenarios where elements extend beyond containers in only one direction.
✓QuietUI Component Strategy: Corey LaViska's web component library includes novel "gimmick" components like flip-cards, joysticks, QR codes, and typewriter effects alongside standard UI elements, plus a restyle sheet that themes native HTML to match custom components using shared tokens.
✓Source-Available Licensing Model: QuietUI uses Polyform non-commercial license requiring payment for commercial use, Discord access, and priority bug fixes while allowing free non-commercial modification—distinguishing "source available" from true open source to monetize spare-time development.

What It Covers

Chris Coyier demonstrates modern CSS shape primitives for creating rounded-out tabs without images, explores QuietUI web component library's unique features, and debates website viability beyond pure commerce applications.

Key Questions Answered

•CSS Shape Primitive: The new `shape()` function replaces `path()` with CSS-native syntax supporting pixels, rems, calc, and variables—enabling flexible tab designs where curves adjust automatically to content width and height using mixed static and calculated coordinates.
•Single-Direction Overflow Control: CSS now supports `overflow-inline: auto` combined with `overflow-block: clip` to enable horizontal scrolling while preventing vertical overflow, solving previously impossible layout scenarios where elements extend beyond containers in only one direction.
•QuietUI Component Strategy: Corey LaViska's web component library includes novel "gimmick" components like flip-cards, joysticks, QR codes, and typewriter effects alongside standard UI elements, plus a restyle sheet that themes native HTML to match custom components using shared tokens.
•Source-Available Licensing Model: QuietUI uses Polyform non-commercial license requiring payment for commercial use, Discord access, and priority bug fixes while allowing free non-commercial modification—distinguishing "source available" from true open source to monetize spare-time development.

Notable Moment

Coyier reveals he maintains a tagged Notion database of unwritten topics, deliberately connecting multiple items per article as a brain exercise, producing weekly content for CodePen while guest posting elsewhere to manage his unstoppable writing compulsion.

Know someone who'd find this useful?