Unicorn Club Logo Unicorn Club
  • Newsletters
Sponsor
← Back to Newsletters

πŸ”Ά CSS shapes have been a hack. This fixes it.

March 4, 2026

Ship Better Interfaces

Build interfaces that stay clear when real users and real constraints show up.

Make better calls, faster with curated reads, distilled into the part you actually need: the takeaway, why it matters, and what to adopt every week.

Less churn. Stronger shipping. No filler.

unicornclub.dev

Hey πŸ‘‹

You can spot a CSS tooltip by what breaks. The focus ring disappears, the shadow detaches, the clip-path leaves a gap.

This week we have a CSS property that rewrites the box geometry directly, a one-question test for whether your design system contribution model has become overhead, and a postmortem structure that learns from success as much as failure.

Enjoy πŸ¦„ - Adam at Unicorn Club.

Sponsored by Crowdstake

AI Marketing OS For Founders

crowdstake

Crowdstake creates custom landing pages, writes copy, and grows your waitlist while you work. Launch fast, validate ideas, and get your first customersβ€”no marketing experience needed.

Start building β†’
paved

Three things worth your attention this week:

Build: Test border-shape next time you reach for clip-path.

Shape: Check whether your design sys contributions start with introductions.

Ship: Log each research recommendation with "Goal:" and "Shipped:" to track what reaches usersRun a postmortem after your next project with "What we knew:" and "What changed after launch:".

Top 3 this week πŸ‘‡
Favicon

Build: border-shape: the future of the non-rectangular web  β†—

Tooltips and custom shapes without the clip-path workarounds.

Why: clip-path hacks that power most CSS tooltips kill focus styles and detach box-shadows from the border, but border-shape rewrites the box geometry so the background, focus ring, and shadow all follow the new shape automatically.

Adopt: Next time you reach for clip-path to build a tooltip or non-standard shape, test border-shape in Chrome Canary 146+ with the experimental web platform features flag enabled.
Favicon

Shape: Design system contributions work better when everyone knows your name  β†—

Most contribution models fail because the team got too big.

Why: In large organisations, DS contribution models scale process to match risk, which turns shared effort into a formal loop nobody trusts enough to complete.

Adopt: If your contributions start with introductions, the team has outgrown informal trust, so scope them to a named working group or replace the model with a lighter intake process.
Favicon

Ship: Project Postmortems for UX Teams: Learning from Success and Failure  β†—

Postmortems work for success as much as failure.

Why: Most UX teams only run postmortems after failures, which means they miss what worked: the decisions that held, the defaults that stuck, the approaches worth repeating.

Adopt: After your next project ships, run a 60-minute session regardless of outcome and log each key decision with two labels: "What we knew:" and "What changed after launch:"
Favicon

What would make this newsletter more useful to you?  β†—

Takes 30 seconds. Honest answers shape the content and direction of the newsletter.

Dive into more

Build: Understanding CSS corner-shape and the Power of the Superellipse  β†— β€” FrontendMasters on the maths behind corner-shape, how it differs from border-shape, and when you'd reach for each. This is the companion read to this week's Build pick.

Shape: The Technical Decision Framework  β†— β€” A framework for the choices that shape your codebase. Stop second-guessing your architecture, stack, and scope choices. Get the framework engineers use to make decisions they don't regret.

Build: Sprites on the Web  β†— β€” Josh W. Comeau on sprite animation: when spritesheets beat CSS animation, with interactive demos and code you can lift for a loading or idle state.

Shape: The Hidden Users of Your Design System and How to Support Them  β†— β€” Developers testing in isolation, QA engineers, PMs making scope calls. Name them in your contribution guidelines and the onboarding section gets a lot more honest.

Shape: Software interoperability  β†— β€” Justin Jackson on why open software compounds over time. Worth reading before you commit to locking your team into a proprietary tool.

Ship: The engineeringification of everything  β†— β€” PostHog on reversibility thinking and measurement culture spreading from engineering into product and design. If your team hasn't named this pattern yet, they're probably already living it.

Useful Extras

Build: Honoring Mobile OS Text Size  β†— β€” Adrian Roselli on respecting iOS/Android large-text preferences

Build: Everything you never wanted to know about visually-hidden  β†— β€” definitive reference, every browser quirk

Build: Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()  β†— β€” new CSS functions doing actual scale work

Build: Getting Started With The Popover API  β†— β€” native popovers without JavaScript

Ship: New Health and Beauty UX Research: 3 High-Level Takeaways from 3,000+ Hours of Testing  β†— β€” 3 patterns from 3,000+ hours of testing

Ship: GenAI for Complex Questions, Search for Critical Facts  β†— β€” when AI beats search and when it doesn't

Build: Keeping community human while scaling with agents  β†— β€” patterns for keeping communities human while scaling

Support the newsletter

If this was useful, here are two small ways to help it travel:

πŸš€  Forward to a one person who builds product or ships UI

πŸ“’  Book a Sponsorship

Adam Marsden at Unicorn Club

Thanks for reading

Adam from Unicorn Club

Follow me on X or BlueSky

Connect on LinkedIn

  • Archive
  • Articles
  • Glossary
  • UI Decision Brief
  • Sponsor
  • RSS

© 2026 Unicorn Club

Curated by Adam Marsden