Today the topic we are going to discuss is the Border Property of CSS. It is a property which is quite often used while developing front end websites. Borders are used to give some definition to an object by specifying the outer boundary. This basically separates out elements if they are positioned close to each other.
This can be Illustrated with a help of an example-
Below are two boxes-green and blue which are combined together.
Now let’s apply the border property. But before we move onto that let me tell you how does it look like on code
border: border-width border-style border-color;
border-width -specifies the width of the border
border-style- Different styles can be applied on the border. It can be dotted, solid, doubled or dashed.
border-color- specifies the color of the border
A point to be noted- there are no commas separating border-width border-style and border-color. All of them are separated by spaces.
Now coming back to our example, let’s see what happens when we apply the border property to the two boxes!
See the difference!! Now we can clearly distinguish the two boxes. I applied a black border to the blue box and a red border to the green box. This is what I wrote to make it work-
For the Blue Box-
border: 10px solid black;
And for the Green Box-
border: 10px solid red;
10 pixels (px) is the width of the border. Solid is the Border Style and black/red is the color of the border.
Before I wrap up there is one more thing which I would like to share with you. You can apply individual borders to each side of a box element. Let’s take another example-
So, Here is the Blue Box again, which has a solid Black Border on all four sides of the box.
Let’s see what happens if we apply individual styles to each side of the box!
This is what has been applied-
border-style:solid dashed double dotted;
A solid border has been applied on the top, a dashed border on the right, a double border at the bottom and a dotted border on the left.
Another point which can be noted is that the border-style properties are applied in clockwise direction-top, right, bottom and left. Just like how we applied the margin-property previously, margin-top, margin-right, margin-bottom and margin-left Remember!
And that’s it for today. Hope you had a pleasant reading experience!