HTML & CSS for Absolute Beginners: Box model - Borders

Key Takeaways

and so taking a look at our site uh we have our content box which is like this part of our box then we have the padding which goes on the outside of the content box we're adding to the total size of the element uh then after we add the padding there is another part of the Box model which is called the border and the border is a lot like padding but it has the advantage of it being able to be a different color from the background that you have so if we'll stick with these paragraphs for now I'm going to add a border uh the thing with orders there's lots of properties we're going to start with border width I'll do 20 pixels and then I'm going to do a border style of solid and we also have a border color border color right there and let's just come in with a color of we'll use a hex code this time 35 de uh on there to get a really tacky looking color coming on uh that we can see there and so we're getting the content box then we're getting the padding and then after that we're getting this border added on there I realized that for if people are a bit hard of sight uh that might be hard to see so I'm going to make that black instead um not hard of sight but for color blind issues that might have been very difficult to see the difference there so this should be higher contrast so we can see we have the the padding coming in outside of the content box then we get this border color coming in outside of that and we can come in with a bigger value and we get a thicker border where I come in with a smaller value and then we come in with a nice a bit more of a smaller border on there now with this I think color is the most straightforward of all the things that we're looking at I'm just going to close my Dev tool so we have a bit more room to work with and uh I think the most obvious like color here I don't think needs much of an explanation in how it's actually working so uh it just works the same as our background color or our text colors we can use hex codes or any of other way to do colors there uh the width is relatively straightforward we see how big we want it to be the style is a bit different in that we have a lot of different styles and include a list down below of the different ones you can try and I'd encourage you to try different ones cuz I'm not going to look at all of them now but just to show you we have things like dotted that makes things dotted uh another one and if you want to get like a bit more old school I guess I can do things like Groove uh that makes it look like this like fake grooved effect that's really terrible um and it you know tries to make it look 3D without it actually looking 3D and there's several of them uh that are like that so you can again look at that list down below and play around with those if you'd like too but just like our padding we can actually control it individually on the different sides and these are actually short hands this is the short hand for the Border top bottom left and right or inline start inline end block start block end not only that though borders take things up another level with how the short hands work because while these are short hands we actually have another Shand which is just border all on its own and this is probably the most common way that you'll write a border so I want to focus on this for a bit where let's just change it up a little bit I'll say it's uh 20 pixels I'm going to come in with the same color we have here because it should be high enough contrast to be easy to see uh and then I'll do dotted for now just so we have something uh that looks a little bit different and we can see the dots come in along there now the interesting thing with the Border shorthand is the order that you put the different values in doesn't matter so I could take my dotted and actually put it as the first value and if I refresh here it's still going to work or let's just change that over to solid for now solid is the one that you use almost all the time when you're using borders uh so there we go we can see the border is coming in with a solid border and I can take this 20 pixels and I can move it to the end and refresh and it's still working and I'll reduce that down to 10 just so we can see that it does work and so this is a really convenient thing with borders is that you just write border and then put three values solid almost every time a color and then a size and you're fine uh which is convenient because there are some CSS shorthands where the order of things is very important we saw that bit with the the padding where the order of it was important but there's other things where they'll just break if you put things in the wrong way nice thing with border shorthand throw them in any order and it works and that's just kind of convenient so I do like doing that and when we're using this Shand this is a Shand for all the sides so you can come in and say this is your Border in line and if we do a border inline it's only going to be a border on our inline axis and as you might guess if I change change this to block it will only be one on the top and the bottom it's our block axis I could also say this is my block end and then that will only go onto the bottom of each one CU we're on the Block axis and the end is the bottom or we could change that whole thing to an inline start and refresh and then we're only doing it on the start and so this is something that you'll sometimes do CU you might want a look like this not with these colors necessarily but we have a border down on one side with just a solid color going through the rest of it with the text in there so yeah having a border only on one side is something you might occasionally do or sometimes what you'll have is you will have your border with the regular shorthand so then you have the Border going on all four sides but then maybe you want to choose only the bottom one and only change the size of it so then we could say that's our border block and width and I'll say that's 100 pixels once again just to highlight uh really clearly that it is different and it's getting much bigger right there so I can choose the specific border I want and then choose the specific property and if you wanted to yes you could change the color uh border block and color could then be purple let's say and switch that and the color there changes as a quick example probably not something you'd want to do with this color combination uh but that is a way that I often use it where I'll use the short hand to set all the sides and then use the uh like the specific one thing to change one of the values along the way there and the order here does matter if I had the Border declaration all the way at the end here because I have the long hands over here and then I'm overwriting the long hand with my short hand at the bottom so if you do want to use the Shand and overwrite it just make sure that this comes first and then you do your short hands afterwards and then you can overwrite it and play around with it and whatever it is you want to do and just really fast I do want to mention that with the Border I've only been showing The Logical properties but you could do uh a border top for example and if I refresh that we only get the border on the top instead of using the block start so border top border bottom border left border right all exist you'll definitely see them out in the wild again if you're writing your own CSS I would encourage you to use the logical properties instead so in this case uh I'm going to skip it over cuz I think you can figure it out on your own now but I'm going to delete all of this and I'm going to leave the footer like that but we do need a a border down here on our quter if we're going to match the design that we have it has a bit of a lighter border the color will be uh listed for you down below so you can grab that if you know to match it and when you've finished with that I'll see you in the next lesson