Apr 9
Loading video player...
CSS finally has a superpower beyond border-radius — and it's called corner-shape. In this video I break down everything you need to know: the 5 keyword values, the superellipse() function, per-corner control, hover animations, and three real-world demos — a ticket stub, a badge that nests perfectly into its parent, and a twinkling star animation. All with one CSS property. No SVG. No masks. No hacks. ────────────────────────────── ⏱ CHAPTERS: 0:00:00 - Introduction: Beyond Rounded Corners 0:00:31 - Demo Showcase (Ticket Stub, Badge, Star Animation) 0:01:10 - What is corner-shape? (How it works with border-radius) 0:01:26 - The 5 Keyword Values (round, scoop, bevel, notch, square) 0:02:22 - The Super Ellipse Function (Custom Curves) 0:03:18 - Animating Shapes: Twinkling Star Effect 0:03:47 - Building a Speech Bubble 0:04:41 - Browser Support & Progressive Enhancement 0:05:45 - Per-Corner Control (Mix & Match) 0:06:37 - Hover Animations with CSS Transitions 0:07:42 - Layering & Transparent Cutouts 0:08:08 - Wrap-Up & Resources ────────────────────────────── 🔗 LINKS Live demos (ticket stub, badge, star animation): → https://codepen.io/PixelPerfectLabs/pen/XJjPoNY MDN corner-shape docs: → https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape CSS-Tricks almanac: → https://css-tricks.com/almanac/properties/c/corner-shape/ Browser support (Chrome 139+ / Edge only — Firefox & Safari not yet): → https://caniuse.com/?search=corner-shape ────────────────────────────── ⚠️ BROWSER SUPPORT corner-shape works in Chrome 139+ and Edge. Firefox and Safari (including iOS Safari) don't support it yet. Use it as progressive enhancement — unsupported browsers fall back gracefully to border-radius. ────────────────────────────── 🎬 PIXEL PERFECT — CSS deep dives that actually go deep. Subscribe for more: https://www.youtube.com/@UCUwOWMjzvIY0_NmmwyMtKzw Are you tired of every design element just being some version of a square or a circle? This video explores advanced css techniques to move beyond basic shapes, showcasing how to create truly wild designs with ease. We dive into properties like `corner-shape` and `superellipse` to achieve pixel-perfect fits for shapes like twinkling stars and speech bubbles, offering a fresh perspective on web design and creative coding.