In this video, we are going to learn how to work with borders in our application.

In general, border means a set of lines around an element to highlight it. But, if you're working with CSS, you can leverage borders to create some beautiful web pages.

So, we'll start by using some basic borders.

Open styles.css, and go to #heading tag. To add a simple border that is one pixel thick, black in color, and has solid lines, code as below:

#heading {
  padding: 42px;
  background-color: #e8e8e8;
  border: 1px solid #333;
}

You have a wide variety of options when creating borders, you could increase its thickness and even change the color. For example, I changed the border size to 10 pixels and color to white.

Though there is no point in having a white border, it is a possibility.

Now, edit the content a bit because it is barely readable. To do so, go to .content tag. add a background color that matches the heading. Also, add a padding of 20 pixels all around and a border only on the left-hand side. The code is:

.content {
  font-size: 0.8em;
  color: #767676;
  background-color: #e8e8e8;
  padding: 20px;
  border-left: 10px solid #ab3939;
}

The web page almost looks like a custom element. But, in reality, it is added styles to existing elements.

Likewise, we can also have a border on the right and at the bottom to give a cupping-like feel to the paragraph.