In this video.
Let's talk about one of the properties of a box model called Border.
So let's get started.
What is border property?
Well, what a property is.
I used to draw lines around boxes.
So in order to further store them, we see.
So let's say that where I have this particular text, which is a box, I want to have some lines around
it.
I'm going to use what is called border.
Let's say I want to add a line at the top here or left here or right here, or I can change the colors
of this one the way I want it.
So let's see with demonstration.
So let me add one more h one.
Well, let me add.
Not each one is a mirror.
Let me add.
Let's say P, for example, have P here.
But well, having talked about selector, so let's stick with this one.
Let me add one more here.
Equal as H.
So let me call this one as border example.
Border example here and now in there I can use let's see a div.
Just a div.
Dave.
Like that.
And then in there I can add my p tag and add any text.
But inside the the Dave let me add h h is three and since that border example.
So I want to target I want to target this particular Dave here.
This Dave here.
I will have one day I'm going to select only one Dave here.
So let me select that.
So let me save it.
Let me select that here.
I only style mine because it's a block level element.
I can use width and height.
So here let me add a background color.
A background color, let's say black and a text on it.
Let's see the color on the let me call it any color of your choice as white.
Yes.
So border here.
So how can we add border around this once that's what we are going discuss about.
So we have what is called border top.
The border top is here.
It asks line along the top margin of a box and border.
Right.
As also I see that this adds border along the right of the box and then bottom and the left.
So let's see in action.
So the same diff here I can add if I say border like this one, this center simply means that all the
sizes, the top left, right and bottom of that.
But I think let's remove this one for now, this background.
Let's stick to this ones.
Yes.
Now let me see.
Let's see.
I border.
This is the syntax first of all, because I want to add border.
I want to draw a line around this particular element here.
So in specify some syntax, the first one is the the width which is called pesos.
Okay, the width of the box of the border, one pesos.
Then specify the kind of color style.
All the colors that are specified here are all solid colors.
So this is solid.
Then the name of the color, let me say red.
Meaning when I save it, you see that I have this beautiful border around it.
You see that?
That's a border around that.
That is the center.
So this border simply means that this syntax can be read in as border, port top.
What I hope is this.
Is this one?
And then changes one one to copy eight copy, eight copy, eight a paste paste and copy it.
So here won't be a top.
Bottom.
You're going to be right.
And then.
Left.
So if I saw this one same the same time, same as the shorthand syntax here.
So if I remove this one or comment it out and save it, you see, I still see the same thing.
But the flexibility of the individual ones, the top is that we can change the colors of these border.
So for example, the top one I want increase the weight or making, let's say, ten paychecks.
You see that now on the top now is ten pieces.
It looks beautiful, right?
I can also change the colour.
Let's say going to be as yellow.
And you see how beautiful that one is.
So I think the yellow is know that I can change it.
They say this color.
Yes.
If we see so on the on the bottom too I can change the the way let's say going to be 26.
You see how it is.
I can change the color or whatever.
And then on the right I can say supposed to be five, but instead I'm going to make it as dash or dot
it.
We see that here.
We have that dotted here.
See how beautiful we are designed with CSIS.
So on the left too, we can make it as five, but instead change the color to a key 25.
So this one looks nice.
You see how we can use the box model to lay out this content nicely on the page?
That's the beauty of the model and that's the beauty of the border property.
The next video, let's talk about margin.