Trouble shooting trick and some fun effects with CSS outline

CSS outlines are an under used property. Outline is great for both troubleshooting, as well as doing some really fun effects that we can't do with other properties.

The codepens

#css

---

---

---

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.

[ayster]

Ok. I hardly ever go back to the vids i watch just to comment, but this one is different. Mr Powell, this advise alone took my CSS coding to a different level. It's like I've been making salads for the last year and suddenly discovered existence of knives. Thank you.

[beyondscarface]

Wow, it's so simple yet genius. I never considered using outlines to troubleshoot. This little video just saved me so much time. Thank you!

[GinaAnagnostopoulou]

Such a helpful video Kevin. It is now so easy to locate why we are getting horizontal scrollbars. It only takes a few seconds. Thank you very much.

[BalboaCodes]

I’ve always used the box-shadow method for this type of thing, but I agree, the outline method is easier to understand. Thanks for the tips!

[turkiothman]

I really believe that you are the best frontend instructor/developer. I wish I was able to get your new course in scrimba. I'll get it one day. Keep the good work. I really love you. All the best for you. :D

[michalroesler]

Awesome tutorial Kevin. You are such an inspiring individual. I love learning html / css with you.

[BharatiSubramanian]

Wow! Such an underrated property.
A few days ago I was struggling with a page in my personal project where the content was overflowing. I wish I had found this sooner. Now, I'll start using this property for troubleshooting. And using outlines to give a frame like touch is a neat trick!

I'm happy I came across this video. Thank you for sharing! 👐

[pauldudley]

i almost fell off my chair when i saw that *{border:1px solid yellow} . i've been doing css for years and never thought of doing bug hunting that way. Subscribed!

[akshay__sood]

Believe it or not but I learned a lot from you. Believe it !
1. That mobile-first approach
2. Responsive design
3. Tricks and Tips
4. And alot.

[paulstanley]

Watching your vids makes me want to be a great coder. Thanks for that!

[yongtian]

Thanks! I've never found that outline can be so powerful...

[RonWaller]

Thanks Kevin. That is a nice troubleshooting tip.

[PhilDiasPJD]

Cool debugging trick. I will use that tonight!

[gmgzyo]

another difference is that this property can only be applied to all four sides at once, no property shorthand (ex. outline-right: 10px; ) or value shorthand (ex. outline: 0 10px 0 0; )

[phongtruong]

Great tip Kevin, thanks for sharing !

[derrisrasaiyah]

Thank you so much. I’m looking for this option. Good timing.

[wmw]

Great as usual! 😁 your videos are amazing!

[suelingsusu]

I love your videos... you are a gem....🙏🙏🙏🙏👏👏👏👏👏

[ubaidurrehman]

Hey Kevin I have a question. After watching your netlify hosting video I hosted my site on netlify and added a custom domain but after the website is the URL in the address bar changes to .netlify.com at the end. Please help!

[k_gamer]

how can i do border rasdius in outline ?