Unsure if you think it wasn't worth mentioning or don't know it's a thing but in fact Firefox has a non-standard CSS property to control the outline radius. `-moz-outline-radius`
You can round the corners of outlines, if the element has round corners: div.round_corners { background-color: navy; border: 2px solid yellow; outline: 5px solid navy; border-radius: 25%; margin: 5rem; padding: 2rem; height: 50px; width: 50px; } BTW, you explain everything well.
This video solved a fundamental issue I was having with resizable grids using CSS Grid. The 'border' property was causing the grid contents to become misaligned. When I switch to using 'outline', problem solved! THANKS!!
Keep in mind that outline is also used for focus state, which means that if you use outline as an aesthethic for interactive elements, you will loose the accessibility it offers. You can get around this by defining your own focus styles to accommodate this. Also you can use box-shadow as an alternative. They can do anything outlines can do but also allows you to add as many shadows as you'd like to a single element. Both outside and inside (inset), with different levels of blur, offset and spread and they can be animated (although be cautious with performance!) You can chain shadows by separating each shadow with a comma. Although it will require you to duplicate your box shadows if you'd like to have different variants based on states (e.g. hover, focus, active, etc.) and can be a bit hairy sometimes, but with tools like CSS Variables, and preprocessors like Sass/PostCSS, this can be made quite trivial.
this channel is the single and only reason I have come to enjoy css. I used to hate it but these videos have shown me once you get in the rhythm of writing css there is alot more to love
I paused midway through because I had to try this out. Matching an outline color to a background color allows for some fascinatingly art deco button shapes! Now I want to go code up a site just so I can abuse the heck outta this effect. ;) And heck yes we want a video detailing animation possibilities. :)
It helps a lot to watch one of his videos per day. Sometimes if something doesn't stick the first time, I'll rewatch it the next day. There's a whole plethora of good, relevant info.
Great Video Kevin..thanks slot🙌 And yes I want to see a video on animated outlines. Fun fact..some weeks back I was searching the internet to see whether I can add an outline radius 😂😂
Hi, thank you recording this precious video. The only thing I'd like to ask is I tried to use border-radius with outline before I watched this video and it is working perfectly. It is still not my first choice as we are not able to edit each single sides of the outline.
I've started using inset box-shadow instead of border unless I don't want to control the sides individually. So I can create some nice transitions of thickness and blur on hover, active, etc.
Be really careful animating shadows, it can have a huge hit on performance. Shadow animations can really easily lead to some janky animations. It's a nice trick, just keep an eye out on that, and don't forget a lot of people are on slow machines and budget devices where it'll stand out more.
Great video as usual and has got me wanting to give it more of a try! I always use the outline + all when troubleshooting unexpected horizontal scroll from watching your previous video a while back. Definitely would like to see you do some cool animation on this topic! 🤗
I'm surprised this didn't come out and say that outline is reserved as an accessible focus indicator and just isn't in the design toolbox. You can do cool things with it but almost everyone uses outline as a focus indicator.
What's I'd like is an inset property for borders or outlines, so that you can overlap the edges of an element and easily create a fade or blurring effect
I've been using this on images for a while to add a litttle inline effect. .img-outline { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: -4px; }
Regarding round corners on focus outlines: I think it’s often a usability benefit when focus states are not too pretty, it’s good that they stand out and look sort of similar everywhere, they should stand out and not blend in. I love having all outlines being squares. Ps: and yes I love outline-offset: 2px as it clearly separates the outline from the element bg color
It's annoying that chrome's new default has them though, lol. But yes, they need to stand out for focus, and it's not about being pretty, it's about being functional!
Hey if you make two and give them a 2px border solid black. You remove margin -- where they touch you will get a double thick border. And border collapse does not work. How do you get only 1 border instead of the thickness of two?
There is one more difference between border and outline which shows off when you want to style something like `fieldset:has(:invalid)` in a fancy way. Fieldset's border is not the same area as fieldset element.
I'm pretty sure I read a draft spec at some point which showed intent to make outline follow border radius. I can't remember who on Twitter tweeted about it though.
Even if you can't have multiple outlines on an element, I suppose you could put a child DIV with no padding or margin that is there to add another outline. Since there is no effect on layout, there is theoretically no limit to how many outlines you can create.
@KevinPowell as of Aug 2023. it seems that outline follows border-radius. Am I wrong, or all major browsers have updated this behavior? Again, thanks for everything!
Kevin, your videos are so useful to me. Question - is there a way to support your efforts with onetime donations here and there? I took a look at Patreon but I don’t want to give a fixed amount each month.
I don't have anything set up at the moment. Could be something to look into :) Glad you like my content enough to want to support me a little! And I get that monthly contributions aren't for everyone. Until I get my act together, don't worry about it :D
Thanks a lot Kevin! We want animation with outline pls.
true, we want that ;)
Yep! I vote for it too! 🗳
This makes four of us!
+1
Yes please 🙂
If youre a full time/aspiring front end or full stack developer, this channel is a "must". It constantly helps refresh and expand your knowledge base.
Unsure if you think it wasn't worth mentioning or don't know it's a thing but in fact Firefox has a non-standard CSS property to control the outline radius. `-moz-outline-radius`
Oh nice, thanks for sharing that!
Cool.
You can round the corners of outlines, if the element has round corners:
div.round_corners {
background-color: navy;
border: 2px solid yellow;
outline: 5px solid navy;
border-radius: 25%;
margin: 5rem;
padding: 2rem;
height: 50px;
width: 50px;
}
BTW, you explain everything well.
that's what I was about to say .. I test it on divs and buttons and it works perfectly fine .. maybe its a new css feature?
This video solved a fundamental issue I was having with resizable grids using CSS Grid. The 'border' property was causing the grid contents to become misaligned. When I switch to using 'outline', problem solved! THANKS!!
Keep in mind that outline is also used for focus state, which means that if you use outline as an aesthethic for interactive elements, you will loose the accessibility it offers. You can get around this by defining your own focus styles to accommodate this.
Also you can use box-shadow as an alternative. They can do anything outlines can do but also allows you to add as many shadows as you'd like to a single element. Both outside and inside (inset), with different levels of blur, offset and spread and they can be animated (although be cautious with performance!)
You can chain shadows by separating each shadow with a comma. Although it will require you to duplicate your box shadows if you'd like to have different variants based on states (e.g. hover, focus, active, etc.) and can be a bit hairy sometimes, but with tools like CSS Variables, and preprocessors like Sass/PostCSS, this can be made quite trivial.
this channel is the single and only reason I have come to enjoy css. I used to hate it but these videos have shown me once you get in the rhythm of writing css there is alot more to love
That makes me so happy 🥳
3rd comment yay 🤣
I started learning html and css this month and your channel is a gold mine.
Awesome, glad that you're enjoying my content and I hope your having fun making some sites!
You saved your hell lot of time buddy
I paused midway through because I had to try this out. Matching an outline color to a background color allows for some fascinatingly art deco button shapes! Now I want to go code up a site just so I can abuse the heck outta this effect. ;)
And heck yes we want a video detailing animation possibilities. :)
Never get tired of watching KP’s tutorial videos 😁💝
Very nice, good looking, charismatic glasses. Also i wanna hear about animated outline
Ah, I thought I was really familiar with outline but never knew about offsets. Thanks!
Never knew this much about outline. Thank you so much for the inspiration.
It helps a lot to watch one of his videos per day. Sometimes if something doesn't stick the first time, I'll rewatch it the next day. There's a whole plethora of good, relevant info.
Best channel ever, pls never stop..
Yes please, I'm ready for animated outlines! Thank you for your consistently helpful content! 💖
this is one of the best channels to learn. Everything is perfect, image, sound, way of explanation, everything 👌🏻
Thank you very much sir! today learned something new. And yes, we want to see how we can animate with outline offset.
Hey Kevin,
I Always love your videos... They are super easy to understand...
Teach me anything 😀
Animated outlines..yes.. yes.. yes😀
You have such a beautiful energy for your approach. ❤
Hi, rookie here :D I've been looking for the "outline offset" solution for a million years!! uff...thank you so much!
Best CSS teacher on RUclips!
I really love the benefit for saving time from writting psudo element ,wonderful tutorial!
Great content as always Kevin. Proud to be your student any day.
Very cool! And yes, we would love to see what can be done with animations and outline
Thank you for covering this topic.
You bare the best,thanks Kevin
OMG I've never known this was added. This is brilliant when adding borders causes all sorts of layout issues. Sweet.
Great Video Kevin..thanks slot🙌
And yes I want to see a video on animated outlines.
Fun fact..some weeks back I was searching the internet to see whether I can add an outline radius 😂😂
You are a great tutor, Thanks a lot Kevin.
your content have always and I think will always help me, thanks.
Highly recommend
Thank you very much for this video! It was very educational for me and helps a lot :)
love you kevin, good luck with future videos !
Hi, thank you recording this precious video. The only thing I'd like to ask is I tried to use border-radius with outline before I watched this video and it is working perfectly. It is still not my first choice as we are not able to edit each single sides of the outline.
Great explanations Kevin, wooow thank you so much!
Thanks, Kevin for your research and stuff and yes we want an animated outline video
I can't wait to see how you animate outlines!
Yeah! outline animation seems like a great video idea :)
Thanks for this, Kevin!
kevin is my daily driver teacher ill say and yes love animations and stuff
This is an amazing video. Thanks Kevin!
Thank you so much Kevin and happy new year!!! Yes, we would like the outline animation please
Animation outlines video would be great. Another great video by the way; thank you.
Thank you sir. I am seeing your video from very long time. I hope your doing like this new videos.
Loved it!! Thanks a lot, Kevin. Would love to see a follow-up video on animations with outlines.
Thanks as always Kevin! Would be great to see your outline animation example. Keep the great content coming!
I've started using inset box-shadow instead of border unless I don't want to control the sides individually. So I can create some nice transitions of thickness and blur on hover, active, etc.
Be really careful animating shadows, it can have a huge hit on performance. Shadow animations can really easily lead to some janky animations. It's a nice trick, just keep an eye out on that, and don't forget a lot of people are on slow machines and budget devices where it'll stand out more.
@@KevinPowell Thanks for the tip. I'll definitely avoid using excessively.
Do you know that because of you and your trick with the image I'm going to save a lot of line of code on my css project ? You're the best!!
We need that outline animation video ASAP. This was really good 🔥
Thank you so much for creating these videos, Kevin! I use to juse guess my way around css. Now I still guess but am sometimes correct.
we want animation with offsets 😎 this cool stuff.
Great video as usual and has got me wanting to give it more of a try! I always use the outline + all when troubleshooting unexpected horizontal scroll from watching your previous video a while back. Definitely would like to see you do some cool animation on this topic! 🤗
Awesome video - subscribed. Would love to see the outline animations video.
I had no idea outline-offset existed, thanks!
Great timing, I really don't know what to use in my project
Just made my life easier on a project. (read: as usual) Thanks!
I'm surprised this didn't come out and say that outline is reserved as an accessible focus indicator and just isn't in the design toolbox. You can do cool things with it but almost everyone uses outline as a focus indicator.
Great video Kevin - would love to see outline animations 👍🏻
Definitely, we want to see how we can play with outline animations 🥳
Really useful. Thanks
Kevin is the CSS 👑
Great again as always
Thanks for that!
What's I'd like is an inset property for borders or outlines, so that you can overlap the edges of an element and easily create a fade or blurring effect
Awesome Topic and the explanation, Kevin :)
I would like to see the animation of outline-offset property too.
Thanks Kev, another great tut. Please go ahead make the animated outline tut.
Great video, so helpful😁
Awesome. Learned something 👍
You are the best! Also, I wanna hear about animated outline :)
This is really useful..thanks
Great video (as always) 👍
Jes, outline with animation . Por favor.
I've been using this on images for a while to add a litttle inline effect.
.img-outline {
outline: 1px solid rgba(255, 255, 255, .7);
outline-offset: -4px;
}
thx Kevin, very cool
Great video as always, would love to see animating with offsets.
Backdrop filter and color invert coming next?
Yes! Outline animations, pleeeeease!
Regarding round corners on focus outlines: I think it’s often a usability benefit when focus states are not too pretty, it’s good that they stand out and look sort of similar everywhere, they should stand out and not blend in. I love having all outlines being squares.
Ps: and yes I love outline-offset: 2px as it clearly separates the outline from the element bg color
It's annoying that chrome's new default has them though, lol. But yes, they need to stand out for focus, and it's not about being pretty, it's about being functional!
So, you can have a negative outline offset and a border radius, which gives off the illusion of an outline with radius. Not perfect, but oh well.
Hey if you make two and give them a 2px border solid black. You remove margin -- where they touch you will get a double thick border. And border collapse does not work. How do you get only 1 border instead of the thickness of two?
i always use _* {outline: 1px dotted red; }_ to see how the elements are linked together /block each other.
lovely stuff Kevin ;)
OMG - never knew!
Yup!.. I'm early! Thanks for this another great explanation!
Shiiit!!! I never knew something called as outline in CSS..
There is one more difference between border and outline which shows off when you want to style something like `fieldset:has(:invalid)` in a fancy way. Fieldset's border is not the same area as fieldset element.
Hi Kevin, I'd love to see your video with animatable outline! Please!
I'm pretty sure I read a draft spec at some point which showed intent to make outline follow border radius. I can't remember who on Twitter tweeted about it though.
That would be sooo nice.
Omg,
An outline is so useful, i only used outline for seeing actual width and inner content of element 😂😂
Had a slight hope that outline would work better with clip paths, alas i leave codepen disappointed!
Great vid tho!
Would love to see an animated version of outline
Even if you can't have multiple outlines on an element, I suppose you could put a child DIV with no padding or margin that is there to add another outline. Since there is no effect on layout, there is theoretically no limit to how many outlines you can create.
Be easier to layer box-shadows on instead :)
i don't suppose you could do a video on nested divs... would be great if you could help understand when and why it'd be good to use them
Yes, please.
Any animation tips would be brilliant
thanks
When do we use outline?
@KevinPowell as of Aug 2023. it seems that outline follows border-radius. Am I wrong, or all major browsers have updated this behavior? Again, thanks for everything!
Safari doesn't... It did, but then reverted it for some reason. I'm guessing it's going to change back soon though
@@KevinPowell i can confirm that border-radius is working for outline on Safari now :)
Kevin, your videos are so useful to me. Question - is there a way to support your efforts with onetime donations here and there? I took a look at Patreon but I don’t want to give a fixed amount each month.
I don't have anything set up at the moment. Could be something to look into :)
Glad you like my content enough to want to support me a little! And I get that monthly contributions aren't for everyone. Until I get my act together, don't worry about it :D