The border-image property is a blast from the past for anyone who had to make buttons with round corners on them back in the 2000s, but these days we can use it for fun gradient effects too!

🔗 Links
✅ Mozilla border image generator: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator

⌚ Timestamps
00:00 – Introduction
00:47 – Looking at the basics with an image
03:07 – Making sense of border-image-slice
05:28 – Using border-image-repeat
07:10 – The fill keyword
09:00 – Gradient example one
11:04 – Gradient example two
12:05 – Gradient example three

#css

—

Come hang out with other dev’s in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

—

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

—

My editor: VS Code – https://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: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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 awesome!
Video Rating: / 5

Email This Post Email This Post