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. 😃
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.
@@Way_Of_The_Light I only know how to do it with solid colors with box-shadow inset... Or a negative outline-offset.. creating a pseudo element sortof works too(by making width and height smaller than the parent)...
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
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
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)
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!
"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".
Would this CSS work when creating an image border? I've tried it and it does NOT seem to work for an image. For some reason it does not bring in the image even though I tested the URL in a browser and that does open the image.
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?
I did it with cut corners and a gradient awhile back, you could probably use the same technique with an image - ruclips.net/video/aW6qEAQSctY/видео.html
This concept is called 9-slice scaling. en.wikipedia.org/wiki/9-slice_scaling I find legacy applications tend to heavily use background graphics, and this technique helps make them responsive.
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.
@@KevinPowell Thank you for this video and for your response. Also, I was the guy who emailed you last week about this very topic. This channel is awesome!
right now if you want a round corner it would have to be included as part of the image. I have a github issue open with the CSSWG on making gradient border-image with work with border-radius.
It seems like its not possible for border-image to work if you have border-radius on your telement. Or well, the border-image work but it does not follow the shape of the element...
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.
This is brilliant, and very timely for a project I'm working on right now. However I'm struggling a little - I'm using a png with a design on a white background for border image, but my border seems to get a small gradient. I can't work out why or how to remove it. Any advice please?
As a border, you have the different sections, so the corner will always be a corner, and always the right size. The "in between" bits adjust the pattern as needed. If it's a background that's just the entire final image, it'll get distorted if the aspect ratio isn't exactly the same as the original image (or cropped)
This is borderline fantastic
🥁
This comment should be pinned for posterity :P
🤣💪🏾🔥😎
No, this is borderline godtier. Saying borderline fantastic is the same as saying barely fantastic
@@OLDACCOUNT_notfireman okay Shakespeare
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
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
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.
Hey quick question, How do you make the border show up inside the box? Like an inner frame of a Tarot Card? 🙏
@@Way_Of_The_Light I only know how to do it with solid colors with box-shadow inset... Or a negative outline-offset.. creating a pseudo element sortof works too(by making width and height smaller than the parent)...
@@Way_Of_The_Light You can have two borders actually. You can use outline as a second border around it.
I see, Thanks for the answers guys 🙏
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
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;
css used to stress me out, this channel makes it much less scary and confusing
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
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!!
I like that that CSS property now exists.
("that that" isn't a typo, it is weird grammar in English)
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)
Remember when border-radius wasn't a thing and everything had a gif border-image? Pepperidge farm remembers.
I use these to put 'Final Fantasy 7'-style borders around UI elements on my Twitch streams. They're great!
great explanation Kevin ♥
so could you provide us a tutorial about : circular progress border using CSS
We could do something fun with that!
@@KevinPowell thanks a lot for that
Still looking forward to the day when border-image becomes compatible with border radius ;-;
KP CSS Tutorials as it's finest. ☝️🙌
Holy crap this is mindblowing. Thank you! I'm going to mess around with this on my current project.
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!
Thanks for your explanation, very clear and helpful, fantastic!
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.
You just saved me some serious design headache (Y)
These videos should be paid
lol saved me hours with that mozilla border image generator
4:24 - "I mucked up my bottom a little bit"
I do that from time to time - it's fine
This is really cool. Thank you sir!
The first 30 seconds are enough to make me feel oooooooooooooold
Excellent video, never used borders like that and I think I will start using it from now on ^_^
Welcome to the styling side!!
I think this is the only video about this subject in the internet
Thanks for that, I didn't known about border-image
Man you just saved my life with this tutorial
Thanks a lot
this was great. was able to use it immediately at work. Thanks
"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".
enjoyed the examples at the end.. just wow
How about the gradient border with radius? And transparent background also.
Really fantastic thing from border image, thanks for sharing my friend
Watching you makes me want to ditch tailwind and just use css
That just made my day 😅
Thanks Kevin
THANK YOU SO MUCH FOR THIS VIDEO
Amazing!!
You make me fall in love with css!
Get well soon Kevin!
Great content as always!
Would this CSS work when creating an image border?
I've tried it and it does NOT seem to work for an image. For some reason it does not bring in the image even though I tested the URL in a browser and that does open the image.
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?
Lovely! 🎨
Now, how about we combine images, gradients, clipping/blending and pseudoelements, and we get photo cutouts for borders… 🤔
I did it with cut corners and a gradient awhile back, you could probably use the same technique with an image - ruclips.net/video/aW6qEAQSctY/видео.html
amazing video, thank you!
Just realized that I way overengineered gradient borders for my first client's website 😅
Well, that's new
Thank you Kevin
Using border-image was pretty common before CSS3
Very beautiful.
Very useful video, thanks
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.
i almost always learn something new, thanks!
Your video contents are top notch Sir . Thanks.
If am using border gradient doesn't support border radius. Any solution for this i dont want background-image gradient with border radius.
This is amazing! Thanks @Kevin
genius! thx a lot
This concept is called 9-slice scaling. en.wikipedia.org/wiki/9-slice_scaling I find legacy applications tend to heavily use background graphics, and this technique helps make them responsive.
wow >> you are amazing
Can you do a video on animating gradient borders
I wonder if you design straight in css and hrml or still use figma?
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.
yeah that's what i was thinking too, especially with example three with a rotate animation
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.
Yeah it's one or the other with border-image :)
@@KevinPowell Thank you for this video and for your response. Also, I was the guy who emailed you last week about this very topic. This channel is awesome!
right now if you want a round corner it would have to be included as part of the image. I have a github issue open with the CSSWG on making gradient border-image with work with border-radius.
Hi Kevin, great video. I have a question, is it possible to do the last border and both sides?
Hello! thanks for the video, very help full! which is the right size for an image not to pixel when using this property?
how to give border radius while using the linear gradient one?
I really enjoy your tutorials, voice and positive energy, God bless you brother🙏💙
It seems like its not possible for border-image to work if you have border-radius on your telement. Or well, the border-image work but it does not follow the shape of the element...
Yeah it's one or the other, but you're image can have round corners if your already going down that route
I tried. It works well except on table cells i.e. td element. Seeking explanation if possible. Love from India
dang, u r wizard
Could you use container queries to make slice more dynamic?
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.
Awesome video!!!
Also known as a 9 slice on video games 🔥
Nice video will help me in my next Website 👍
Thanks! Very useful, as usual.
great video! Thanks kevin!
its work thx brother 🙏
If you used "fill", would there be a lime green semicircle in the top left?
Can you please explain how it works for circular divs or images.
How does this interact with border-radius, and how many of these properties are animatable?
🤩🤩🤩🤩 ty for making css awesome
Mind blowing and really beautiful:)
Very cool
I wonder how this would interact with border-radius though
wow nice.
This is brilliant, and very timely for a project I'm working on right now. However I'm struggling a little - I'm using a png with a design on a white background for border image, but my border seems to get a small gradient. I can't work out why or how to remove it. Any advice please?
Don't worry. I fixed it. Only took 2 hours! The gradient was a box shadow from the div above. Obvs really.
Nice!!! Thx!
Good stuff
Can you explain the downsides of using a background image instead of border image? thanks!
As a border, you have the different sections, so the corner will always be a corner, and always the right size. The "in between" bits adjust the pattern as needed. If it's a background that's just the entire final image, it'll get distorted if the aspect ratio isn't exactly the same as the original image (or cropped)
@@KevinPowell That makes sense, thanks for the prompt reply! I'll have to try out both for my project and see what works best :)
How can I do the property of border-radius? when I give the border radius it effects the background color not linear-gradient border
No border radius with the images sadly, you'd have to set the corners of the image up to be rounded
@@KevinPowell but I am using linear gradient color for border, not image
✨ magic ✨
Thanks 👍
Hey @Kevin Powell, have you created a video about letting people know not to fall for Telegram bots? I have reported the Telegram bots as spam.
how to make curve border top left corner in example 3, because border radius isn't working and i don't know why
Can't use this and border radius, it's one or the other sadly... So you need to have the corners round in the image itself
@@KevinPowell ok thanks amazing channel btw :)
Great video 🙏🏾🖤
I love it