Uploaded September 2025 | Updated September 2026, 1 hour ago

---

A brief look at the new corner-shape CSS property, which lets you easily create interesting and creative border effects.

Demo: codepen.io/ZoranJambor/pen/xbZxbaR?editors=0100
The corner-shape on MDN: developer.mozilla.org/en-US/docs/Web/CSS/corner-shape

My Newsletters:
💌 CSS Weekly: css-weekly.com
🤖 AI Developer: aideveloperweekly.com

Help support my channel
☕️ Buy Me a Coffee: buymeacoffee.com/cssweekly
💖 Become a member on Patreon: patreon.com/cssweekly
🪧 Buy CSS Stickers pack: stickers.css-weekly.com
👨‍🎓 Get a course: masteringlinting.com

📖 Chapters
00:00 How the corner-shape CSS property works
01:35 How to use corner-shape as progressive enhancement
02:19 What is the superellipse() value for corner-shape
03:18 How to transition/animate the corner-shape CSS property
03:56 Should you use CSS corner-shape propery?

Keep up-to-date with CSS Weekly:
🦋 Bluesky: https://bsky.app/profile/cssweekly.com/
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #csstips