Creating an inverted border-radius with CSS
133,551
Published 2023-05-25
🔗 Links
✅ The original tweet: twitter.com/florinpop1705/status/16476686180023296…
✅ My finished code: codepen.io/kevinpowell/pen/LYgMQpQ
⌚ Timestamps
00:00 - Introduction
00:16 - The easiest solution?
00:30 - Setting up the layout
02:08 - The white separation
03:19 - Using a radial-gradient to make the corners
04:36 - Positioning the corner things
06:15 - Two problems with this solution
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more a
All Comments (21)
-
Tried a very different style with this video and I'd love to know what you think of it! (and yes, the mask-image would have been a lot easier and is probably the best approach 😅)
-
I had no idea you could position pseudo elements on the grid that’s so useful
-
There's nothing better than taking a design that most people would think requires photoshop/illustrator/masks/whatever and making it purely with CSS :) -- love this one!
-
Is there something that this guy can't do?! Amazing stuff Kevin!
-
That’s why you are the CSS GOAT! 🙇♂️
-
This is next level and why I love your work so much. You not only show the 'what' and the 'how' but the 'why'. So important to understand when troubleshooting. At least it is for me. Thank you, and my vote is for more vids in this format.
-
you can do this with clip-path: polygon and sass functions by approximating a radius. Maybe impractical, but kinda cool, cause you can approximate any kinda shape, even squircles (like the shape of an ios app icon), which look very nice. You can even animate clip path point by point.
-
I used to not be very interested in CSS, and would learn how to brute force certain things, but as I've recently become the staff (read: only) frontend engineer at a startup, I've had to do more and more elegant implementations from our design team, and your videos have been instrumental in teaching me all the levers and switches and tools at my disposal to get things done easily and scalably, and I really appreciate that.
-
Thanks for this video, Kevin. Seeing you use psuedo classes is always pretty impressive to me. Looking forward to the next one. I also really like that you pull suggestions like these off twitter. Little design challenges like these that I haven't seen before are inspiring.
-
Love the ingenuity of this. It is not always about the easier way, but knowing the ways you can achieve the same thing, though manipulatable means is the true pursuit of wisdom, as it can be applied in many different, and even unrelated scenarios. Great work, Kevin, as always!
-
I love this shorter format! It's a good pace, quick and to the point, but still very easy to follow along if you know the basics (pseudo elements, grid, variables)
-
Thanks for going the hard way, in cases like this proving a point is progress for everyone. Also the sped-up live work was interesting to watch!
-
Beautiful!! Thanks Kevin!
-
Bravo 👏 👏 👏, I did the same using an svg as the corner that I rotated for each corner and had a variable for width, height, and fill to control its size and color. Your solution is so awesome and simple, and the best part is that it's all css, amazing!
-
What a beautiful little design! Thanks for sharing, Kevin!
-
Had this problem 8 years ago or so. Added circles in size of the radius and in color of the background to get this shape. Very simple solution.
-
Maybe not centric to the video, but that bit of "moving on to solving something else to make progress when you get stuck with a problem" is something that really helps me in my day-to-day web-dev tasks
-
Amazing work Kevin, thank you for the video!
-
Really impressive stuff! Thank you for sharing ❤
-
I really like hearing your thought process.
