Video Summary

Alright guys, so we’re gonna go over how we can use the shorthand version of borders and how we can do psi, we can isolate individual sides and style them according to how we want. So instead of coming in and having to type out the border array or the border style, the border width and the border color, we can come in and just put in border and type in all three of those values and it will work just the same so that’s just being more efficient with our code. So this we’re gonna come in here and put in border and let’s do two pixels. Let’s do solid and we’ll do blue. 

And we have within one line, we were able to specify exactly what we wanted for this border. Right? Now you’re not able with the shorter version, you’re not able to do a radius. So if you ended up wanting to manipulate the sides, you’re allowed to enter your border radius separately. But for this example, we’re just trying to isolate the different sides of this. So right now we have the border as two pixels, solid and blue. But maybe for this for whatever reason, I want to change the border of the top to be a different color. So let’s do border top. 

And then let’s do let’s just do two pixels solid, and let’s do red. 

We’re just change the color. We’ll leave the same sizing as it is. Maybe on the left, we want to change the size, but we still want to keep the blue so we’ll do border left. 

Let’s do let’s do something completely different. Let’s do seven pixels. Let’s do double and so now we have a double line over here. We have that we have it as seven pixels, and we have it as the color purple. So with the shorthand version you can easily manipulate it individual sides and you can set up your full styling for that section or for that side, whether it be top bottom left or right. And also to have while we’re here if we want to do let’s just do the border radius because this is not included in the not included in the short handed version. Let’s just do 50 pixels.

So now we kind of have a cool effect over here where our double is going into the single and we have this cool effect over here. So we’re still able to use the border radius but we’re talking about for shorthand versions, you can only use the width, the style and the color. Alright with that being said, let’s go and learn about padding and how we can change the, the space between the border, and our text.