CSS: Adding Borders to Elements

Adding Borders to Elements

In this lesson, we are going to learn, how to add borders to elements, so let's get started. In our previous lessons, we learned to set a background image. If you want to change the certain background color and keep the background image for rest of the webpage,  you can accomplish that by selecting whatever area which you want to change the color of, and wrap it inside of a generic div. I'm going to set the class for that particular div element and call it a wrapper, you can name whatever you want. In the style.css sheet, write .wrapper with a dot at the start, and set the background color to white like such:

.wrapper{
  background-color: white;
}

The div with a class of wrapper is now going to have a background color of white.

In the above image, you see the certain background color changed to white, while some area still shows the background image, now it looks pretty. You can play around and make changes as you see fit according to your preference.

You can also add borders around the webpage by using the border-width: property and set the width of the borders to 4px like such 

border-width: 4px; this property will not take effect, we need to add another property called border-style: tells us what kind of borders do we want. You can select from dashed, bottled, hidden and so forth, it really depends on your 

preference. For the sake of demonstration, I am going to go with the solid one.  border-style: solid; you can also change the border color by using this property  border-color: blue;

.wrapper{
 background-color: white;
 border-width: 4px;
 border-style: solid;
 border-color: blue;
}

Now if you refresh the screen you will notice that it has a solid border of blue

You can change the color by writing the name of the color or you can write the HTML color code like such #ffffff

We learned in the last lesson that instead of writing so many attributes, you can define all the parameters in one particular attribute. So instead of writing so many lines of code, we can simple write border: 4px solid #3399cc; and it will still work the same way.

.wrapper{
 background-color: white;
 border: 4px solid #3399xx;
}

If you want your border to be only at the top of the webpage and not on the right or the left side or bottom, you can simply do

border-top: and it will only show at the top of the webpage. 

.wrapper{
 background-color: white;
 border-top: 4px solid #3399xx;
}

You notice, only the top border is showing and its color is also changed

you can also have two different borders as well, you can have a solid border at the top and a dotted border at the bottom, you can accomplish that like such

.wrapper{
 background-color: white;
 border-top: 4px solid #3399xx;
 border-bottom: 4px dotted #3399xx
}

Refresh the screen and you see, the top border is solid while the bottom border is dotted

I hope you enjoyed this lesson, If you have any question, please leave your comments below, I'll talk to you in the next lesson. Good bye :)