Apr 29
Loading video player...
The corner doesn't curve out — it curves in. CSS gives you border-radius for the easy direction, and absolutely nothing for this one. So we'll build it ourselves — four production techniques you can ship today, plus the brand-new corner-shape and border-shape properties Chrome 147 just landed. Every technique we walk through underneath is the same trick: box minus circle. Once you see that, every cutout corner you've ever scrolled past — bottom navs with FAB cutouts, boarding passes with notches, magazine scoops, Apple Music's tucked album art — clicks into one mental model. 🎯 What you'll learn: - The mental model behind every CSS cutout corner (box − circle) - The box-shadow + pseudo-element trick (works back to IE9) - The radial-gradient mask technique (any background, including gradients) - clip-path: shape() — went stable across all browsers in early 2026 - The native corner-shape and border-shape API Chrome 147 just shipped - Decision tree: which technique to reach for in which situation - Progressive enhancement pattern to ship today and upgrade tomorrow ⏱ Chapters 00:00 The cutout corners CSS pretends don't exist 00:43 Inverted means concave — and why -20px doesn't work 01:56 Technique 01 · Box-shadow trick (the oldest hack, still ships) 04:39 Technique 02 · Radial-gradient mask (works on any background) 07:15 Technique 03 · clip-path shape() (custom curves, finally stable) 10:10 Technique 04 · corner-shape + border-shape (Chrome 147 native) 12:45 Decision tree — which one do you actually pick? 14:06 The recap and your 20-minute challenge 🔗 Pixel Grid UI A weekly CSS deep dive — frontend techniques pulled apart slowly enough that you actually understand them, not just memorise them. This video showcases various web design techniques with code snippets and visual examples, demonstrating how to create a "floating action button" using css. We explore how to use "clip-path polygon css" for decorative elements, and achieve "corner shape" effects, making your web development projects shine. Learn how to decipher cryptic text into plain English and manipulate shapes using browser-native subtraction for a truly modern webdesign. #CSS #WebDevelopment #FrontendDevelopment