This is borderline fantastic

5:38 "This isn't what you'd think it is" - that's a great description of CSS properties in general!

This is so cool. I want to see more of these little design hacks for common designs patterns.

I have just implemented the transparent gradient border in my website thanks to you! Awesome! I actually use it in an :after element behind the semi-transparent background for my articles with the z-index set to -1. 😃

I couldn't figure out why it wasn't working, but of course coming to a Kevin Powell video you learn exactly what you need

Damn .. been searching all over the place for gradient borders.. I just used to add multiple backgrounds with proper positioning and size to emulate gradient borders.. or just layer ::before to get gradient border.. This was too informative Love you bro

for gradient border i always use background: linear-gradient and changing border to transparent. background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to right, #9c20aa, #fb3570) border-box; border: 10px solid transparent; first linear-gradient is basically your background color to fill only the padding box while sitting on a second linear gradient which is the gradient that fills to the whole border area.

border-image is like that one candy on the bottom of the package - you don't really expect so much from it, its name is kind of boring and not really promising, but when you unwrap it, you realize - it is the most delicious candy of all times

Nice content Kevin I also used gradient borders in some of my recent projects One drawback is that it doesn't work with border radius

Welcome to the styling side!!

KP CSS Tutorials as it's finest. ☝️🙌

css used to stress me out, this channel makes it much less scary and confusing

The first 30 seconds are enough to make me feel oooooooooooooold

Last time I use border-image when it was as an exercise in a paper tutorial book and it was almost useless in real world. But now, with a gradient, that might be usable! Thanks!!

Perfect, I am coding my small project now, as I am not a designer i try to make things look simple, but i always want to add some artistic touch to them. The transparent border is something i need)

Here's a fun "highlight the corners" snip-it. Setup your own color and the transparent percents can tune how quick it fades out on each corner. The "to" keeps it pointed at the other corner if your container changes size. border: 0.3rem solid; border-image-source: linear-gradient( to bottom right, $color, transparent 30%, transparent 80%, darken($color, 10%) ); border-image-slice: 1;

that was some pretty slick border action. I need to inject this knowledge into the designers at work so they only design based off the things I already know ha

Omigosh! I didn't know this was doable! This video would have helped when I needed to do a gradient border a while back. Dang. Haha.

Thanks for your explanation, very clear and helpful, fantastic!

These videos should be paid

Amazing!! You make me fall in love with css!

Holy crap this is mindblowing. Thank you! I'm going to mess around with this on my current project.

Get well soon Kevin! Great content as always!

I use these to put 'Final Fantasy 7'-style borders around UI elements on my Twitch streams. They're great!

You just saved me some serious design headache (Y)

I like that that CSS property now exists. ("that that" isn't a typo, it is weird grammar in English)

Excellent video, never used borders like that and I think I will start using it from now on ^_^

Man you just saved my life with this tutorial Thanks a lot

Remember when border-radius wasn't a thing and everything had a gif border-image? Pepperidge farm remembers.

This is really cool. Thank you sir!

i almost always learn something new, thanks!

lol saved me hours with that mozilla border image generator

great explanation Kevin ♥ so could you provide us a tutorial about : circular progress border using CSS

this was great. was able to use it immediately at work. Thanks

THANK YOU SO MUCH FOR THIS VIDEO

Still looking forward to the day when border-image becomes compatible with border radius ;-;

This is amazing! Thanks @Kevin

Thanks Kevin

enjoyed the examples at the end.. just wow

Really fantastic thing from border image, thanks for sharing my friend

amazing video, thank you!

I think this is the only video about this subject in the internet

"The border property you never knew you needed" My negative side: "May be because we actually didn't need it?" My other side: "Just watch and shut up. You might actually happily use that one day".

Thanks for that, I didn't known about border-image

Your video contents are top notch Sir . Thanks.

Well, that's new Thank you Kevin

4:24 - "I mucked up my bottom a little bit" I do that from time to time - it's fine

Very beautiful.

great video! Thanks kevin!

Very useful video, thanks

wow >> you are amazing

Thanks! Very useful, as usual.

Awesome video!!!

🤩🤩🤩🤩 ty for making css awesome

I really enjoy your tutorials, voice and positive energy, God bless you brother🙏💙

Watching you makes me want to ditch tailwind and just use css

Mind blowing and really beautiful:)

I've needed something akin to the radial gradient tip at the end, where you want something similar to 'mounting corners' in a photo album. Adjusting the stops to give a hard start to the transparency would be perfect!

genius! thx a lot

Using border-image was pretty common before CSS3

Thanks 👍

dang, u r wizard

Great video 🙏🏾🖤

✨ magic ✨

its work thx brother 🙏

Nice!!! Thx!

Such a cool things~ thx

Good stuff

Lovely! 🎨 Now, how about we combine images, gradients, clipping/blending and pseudoelements, and we get photo cutouts for borders… 🤔

Just realized that I way overengineered gradient borders for my first client's website 😅

Nice video will help me in my next Website 👍

I love it

Very cool

Cool !! 💯💯💯

We are brother

Also known as a 9 slice on video games 🔥

How about the gradient border with radius? And transparent background also.

Typing "Brilliant!!!" and start watching the video :)

This was great! I am curious however on how you'd mix this with adding a border radius as well. It seems that the two "fight" one another.

wow nice.

I wonder if you design straight in css and hrml or still use figma?

Sir, I would like to see you create a 2D intro with css, and by the way its because of you I loved css. Thank you for the amazing videos.

Borderline was Madonna's best song.

Hi Kevin, great video. I have a question, is it possible to do the last border and both sides?

Can you do a video on animating gradient borders

Thanks for the video. Good stuff. Would this be a good use case for throwing a loading "spinner" on a button? I played around a bit and think the Gradient Example 2 approach with an animation altering the deg would make it look like a loading bar and perfect for a button. Throw the loading class on the button when it is clicked, and remove that class when the process is finished.

I wonder how this would interact with border-radius though

Could you use container queries to make slice more dynamic?

Informative..

Gad. This just feels like the typical css pit of - "what if I change that?" There are parts of this even you don't understand. How this will behave in all enviornments seems like a nightmare to me.

Hello! thanks for the video, very help full! which is the right size for an image not to pixel when using this property?

I've been stuck trying to figure out an animated border-gradient with a Border radius while keeping a transparent background. I've seen ur animated border gradient video but with that method it looked like you need a 'background' for the card at the front to hide the gradient thats behind it. Is there a way to make an animated border with round corners? The SVG videos gave me the impression the gradient cannot be done in the CSS only in HTML, am I understanding that right?

The lorim ipsom was... Distracting.

TIP: Turn OFF the annoying Editor Hover feature that shows the MDN Reference and keeps popping up during videos in VS Code. Just go to Code -> Preferences -> Settings Search "editor hover enabled" and disable checkbox.

nice

Hey quick question, How do you make the border show up inside the box? Like an inner frame of a Tarot Card? 🙏

If you used "fill", would there be a lime green semicircle in the top left?

Damn!

useful

How does this interact with border-radius, and how many of these properties are animatable?