CSS Outline vs Border - differences, advantages, and disadvantages

Key Takeaways

outlines and borders look really similar at first their syntax is even almost exactly the same look at this now i use outlines quite often in my videos and whenever i do i get asked about the difference between using an outline and using a border so in this video we're breaking down the differences from the really big and obvious ones to some of the more subtle ones and at the end we're also going to look at a fun use case for outlines that doesn't involve focus states because that's usually where you see them used all right borders versus outlines we are here in codepen i was going to say vs code but we are in codepen and i'm in here because it's a nice quick little example and i've linked it down below so you can jump in here and play around with it while i do this or after the fact if you would like to so the very big one is that borders are part of the box model whereas outlines are not and what does this mean well it means that borders take up space on an element which is kind of interesting but if i go here on my border and you can see they both look almost the same now there's one really subtle difference i don't know if you can notice it let's make this 200 pixels let's make it just gigantic and well you can see it's it's changed the length of my site and it's had a big influence on things because that 200 pixels is taking up room on everything whereas if i come on the outline and i say 200 pixels nothing is going to move it just takes up visual space but it's not actually having any layout implications whatsoever so this is probably the biggest difference between the two of them and has a lot of implications actually um on how they work obviously and you can think of outlines this is like when you put a box shadow on something if you put a shadow on something that shadow doesn't influence the page at all same thing with an outline it's painted it's drawn there but it's not influencing the layout at all and this is actually the reason that i recommend using outline instead of borders if you're doing any uh debugging so if you have layout issues you have over scroll stuff that you don't you know you don't know why things are causing some horizontal scrolling stuff like that uh outlines is perfect for that i actually have a video where i talk just about that and how we can use outlines for debugging if you're interested in it now another interesting thing just since we're on the topic of the box model is actually here that if you look at the outline it's actually a little bit further out and that's because the outline is drawn outside of the border so if i add here in border border of one pixel solid blue let's say um you know the outline is on the outside of that and so the the outline is being drawn on the outside of my my border box so if you look at these two and it's really really subtle let's let's see if i do a 20 on this one if we can see it a little bit clearer but there you go you can see this is on the outside whereas this is more on the inside of the element itself um so there is a difference there also on how like where it's being drawn so that can influence things depending on how you set up your padding and other things like that along the way but when it's really small it's a very subtle difference but when you have really big numbers it can't be pretty big another important thing with borders is you can control parts individually right so i can say that my border is or first of all i could just say border bottom here if i wanted to border bottom and i could only have a border on my bottom instead of on all the sides or if you have a border on all the sides i could say that my border left color is blue and i could say that my border right width is 20 pixels and just like that we can switch things around on my borders and control them individually and this is always something cool that i think people don't often take advantage of and i probably don't either but it's kind of cool that you can pick and choose what you want the outline is a shorthand for but it's not a shorthand for the different sides so like you know if you did a border just a border uh left like this that's a shorthand for like the color border left color border width border left width border all and all the border left stuff um there is no outline left outline right so like if i came on here and i said outline left nothing's going to happen it just doesn't show up because it's an invalid property uh so outlines it's all or nothing and you can't individually control the different parts of an outline which is a bit of a shame because i think it would be kind of fun to be able to but it is what it is another really this is probably the thing that bugs me the most about outlines as much as it's nice to be able to control the different parts of it another thing that is super useful is that we can do things like border radius and as the name implies on the border radius it will work on a border border radius and let's just do something big enough that we can see it when we get nice round corners if i come on my outline and i say a border radius of 10 pixels well nothing's going to change and what's even more annoying is we have a background color on here background color of red just so we can see it really easily you'll actually get the round corners but the outline is not rounding and this can be annoying if you you're putting a custom outline on something we have round buttons and you want to focus state with an outline um that can look a little bit weird so i do think that's one of my biggest pet peeves with uh outlines is that you can't have the wrong corners on them and an even bigger pet peeve is that there is a way to do it because the new chrome default focus state um has an outline right and that focus states outline is actually does have round corners they're not very round um but they are a little bit rounded and we can't do it and then darn browser defaults doing stuff that we can't do um actually the new chrome one's nice too because it can inverse colors and they're for the um outline color there actually is an inverse color that should work but i haven't i've tried it in a few places and i never actually saw it work um just so you know so you can see that like invalidated it here um so i've tried in firefox and in chrome anyway and it does nothing so sadly it seems like it's out of the picture for now so yeah those are the some of the differences but just because we can't have round corners doesn't mean that outlines don't have a superpower because they have one of the coolest superpowers in the world and actually let's put a background color back on here let's say a background of um i don't know i'm just going to choose a dark color and maybe a color white so we can see it and then i'm going to make this black as well so you get a black uh outline and you go well kevin why would you want to do that or a 333 just to keep it consistent we can't even see it and this is the superpower of all superpowers as far as i'm concerned i love this one so so so much um which is my outline offset and let's say three pixels and just like that look at that it's saying that we want to offset everything by three pixels so it's pulling it away by three pixels and you get this nice little thing like that and that's super cool um there's ways of doing something like this with shadows and stuff to get like a double border effect but it's so nice and you know i am using pixels for all this just really fast if this was production i would definitely be using um m rem um and i'd probably be using m for this so if the font size changed the proportions of stuff would change but just a little side note there so you can make this as big or as small as you want because outlines don't affect your layout so you can go really big really small and you can even do negative values and if i do a negative value uh negative 5 pixels and then i could come on here and say that it's white well then you get this little inset thing going on huh isn't that cool and you can create some cool stuff like this and it's not only on buttons you can use this for some really cool things uh before we get there just a really quick recap up until now we've seen that one of the differences is that borders are part of the box model whereas outlines are not so they don't actually influence layout and that means you can use it in some interesting ways and use either bigger ones or use the offsets and they won't cause any problems you can control the individual sides of a border where you can't do that with an outline outline is all or nothing border you you can choose one you can choose two you can do all of them but they're all different from one another so that's kind of cool another thing is border radius does not work on outlines which absolutely sucks but they have our offset here which is absolutely amazing um so what i'm going to do is actually turn off these buttons just to look at an example of when you might want to use this on a different type of situation so you might have a nice cool picture that you have you're using for something and on that picture let's just choose it here i'll just come in and say image and we can do an outline on here so outline three pixels solid lime and then you get that well it doesn't look super great does it but then you can come in and say that you have an outline offset and on my outline offset i could do something like say 1m going outward and then it's going to expand out that's going to be kind of big but you can sort of create this framed effect super super easily um or maybe like a 0.5 could be a little bit better on that so something like that but you get like you can create a frame around your image where you get the white border all the time and even you know i'm saying line but obviously this could be black or something else that goes with your design um so i think that's really cool or just like we saw before you can come in with a negative value and suck it in on top of your image and i think this is just super neat you can do this on images and stuff like that um which you know things like this having to do like a pseudo element um or something else sometimes with absolute positioning and trying to play around with it so it's positioned properly and then trying to get the border on it and you have a whole bunch of code going on you could just you could just do this it's super easy and super fun um and i think you can do cool stuff with that now one thing i think i know you're going to be asking seeing this is can i do multiple outlines no you can only have one so you have to use it in an interesting way but it would be pretty cool if you could have like four outlines or one on the inside and one on the outside or something but alas it is what we have but i think that is really cool and a really nice use case for it is on images or if you have like a a black div and then you have this outline that's like offset from it that's in your accent color or something it just opens up a lot of design possibilities that wasn't i didn't talk about this in this video but as an added bonus outline offset is an animatable property which is really fun if you'd like to see me make a video on looking at some of the fun effects that we can do with that leave a comment down below and let me know about that if enough people want it i'm going to take a look into that in the not too distant future and with that i just want to say a big thank you for watching a massive thank you to my patrons who help support what i do here on this channel each and every month and of course until next time don't forget to make your corn on the internet just a little bit more awesome