Outer Border Radius Tabs

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Imagine a real-life tabbed folder. The tabs on those aren’t only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. Steve Smith has a published a neat technique utilizing pseudo elements to do it.

I tackled this same exact idea that I’m using for some upcoming talks and this is how I did it.

Direct Link →