CSS-Border Property

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.

Capture

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;

where

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!

Capture

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.

Capture

Let’s see what happens if we apply individual styles to each side of the box!

Capture

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!

clockwise

And that’s it for today. Hope you had a pleasant reading experience!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s