Kevin Powell released a video today about css-outline vs css-border. I’ve used both for testing purposes when building elements on web pages, but I haven’t used css-outline on a web page for anything other than testing an element’s border limits and position.

However, what really drew me was when he demonstrated outline-offset, which I’ve never seen before. It lets us take an outline (which doesn’t affect layout, like a border does – it doesn’t have “mass” on a web page) and move in inside or outside of an element. This is a really nice way to frame something. I’m definitely going to use it in my projects. Its applied separately from the outline, just like how border-radius is applied separately from a border’s properties.

I can definitely see applications for it both on permanent fixtures on a web page as well as combined with hover effects and the like.