Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 24 Editing The Border Property (Width, Style, Color)

This is Sasha and thanks for joining me for another educational CSS video so that way you know how to edit your business website, and today I want to discuss with you the border attribute or the border property. Let’s take a quick look.

Here what I have is a couple of border property setup. I have a border width, style, and color. Now, we’ll go over all these here in just a quick minute but you can see what’s happening is at the top there’s a box that’s being created that has this type of border. Now, the border width tells you how thick that border is so you could go and type in thin, and if you look at it you can see the light. You can see that the border is nice and thin.

You could do medium. That’s also another way, or you could do thick which is what we had earlier. The border style tells you the type of border there is, and there’s quite a bit of them. You could do none, hidden, dotted. Let me show you dotted. Okay, so you can see how there are dots around there.

You could do dashed, okay? Here’s the dashed. There’s also a double, okay? Take a look at the double and even groove, okay? There’s a groove which you may not be able to see as much. There’s also a ridge, okay? Let’s pop this to thick and see if we can see it sometimes with the black or that darker color you may not be able to see it. There we go, that’s a little bit better. Let me zoom in, and maybe you can see it.

Then there’s also an inset, outset that you can play with. The majority of these are not used too much. The main ones typically I would say is sometimes you have a border on something, and you want to do none, so you go ahead and assume none and then it gets rid of that border. It’s convenient when you have like let’s say border top, left, this or that and in that case, you can do it in that way and use the none feature.

The better approach to adding in a border is something like this. It’s the shorthand version. You type in the border, okay, and then what you do is you type in – again, this goes appropriately as you go first the thickness then you go – so I’ll show you an example. You say, okay, thin then you go ahead and do let’s say dashed and then we’ll pick a color.

We’ll do right here just a gray color. Let’s make it thick, okay? So now you can see how that border shows up right there. It’s a little bit difficult to see let’s make it a little bit of darker color. There you go. You can see that’s the better approach. It’s the shorthand version. But what if you only want the top?

Well, what you could do is I could do border-top, and now it only puts it on the bottom. What if you want top and bottom? Well, if there’s no real shorthand version, you go border-top, and then you do border-bottom, and then I could do a medium on this one, and a solid line here and I could even change the color to let’s say some red or pink or purple.

You can see those borders are different. You have to kind of add-in many borders to do this in the shorthand to be able to mix and match different types of borders. You can’t really – if you did it the long way, I mean, think about, you know, having border-top-left-radius because you can see border-top-color.

If I go ahead with border-top-color, then I have to do a – let’s say here, okay, I do it the long way border-top-color. I add this in then I do border-top-width, I have to write that in so this would be a medium. Imagine doing this. You have three or four lines for every border.

For the border, most people shorthand this. They do just the border on it if it’s a whole border all the way around. But if it’s like a top and bottom, then you might do it this way. Usually, most people use pixels so again it’s the same thing as you could do 1 pixel or you could 5 pixels, and that is a little more precise.

I do 1 pixel, I could do 3 pixels, I could do let’s say 8 pixels, okay, or this one let’s say 11 pixels or I might do dotted here. Most people use borders in this way typically. I mean, if you’re going to use a border, it might 1 or 2 or 3 pixels, and again it depends what you’re doing, but ultimately that’s what you do it again you want a border all the way around, well, you just do border 1 pixel, substantial number and you put in your color and we’ll rid of these and that’s basically it. There you can see our little border, and that’s just a quicker approach.

If you need a little thicker, we’ll go to 3 pixels, and you can see, there we go, we have a 3-pixel border. If you want it just on the left, you type –left and there’s a border. It’s a nice way of doing it. If you want it on only the right, you change that left to the right, and then you go ahead, and then the border shows up there.

If you want it on the left and the right, there’s no quick way, you have to do two lines, and you go border-left and border-right, and there you go, and there you have a border on the left and right. But that’s ultimately how the border of property works. There are a few other things in there like an initial value and an inherent value.

You could do that way but ultimately the most natural approach and those are the fields and parameters that you’re going to use most often as just the ones here that I’ve shown and mixed it together with first you do the thickness, the type of border and then the color and again you could do just border on its own which gives it all the way around or left, right, bottom or top and, you know, just defining it that way as we get more into corner radius because you’ll notice there’s also a border radius.

You could do like let’s say 3 pixels which we will discuss a little bit later, but there are other border properties. Keep that in mind, and you can see right there how it gives it a slight tiny radius if I do a 13 right there. You can see it starts rounding things out, but we’ll cover that a little bit later.