Basics of Working with Borders in CSS

Now we will learn how to add a border to elements. This is done using three properties: the border-width property sets the border thickness, border-color sets the color, and border-style sets the border type.

The first two properties work in an obvious way: border-color accepts colors in the same format as color, and the border thickness is specified in pixels. But border-style accepts values ​​as keywords. For example, the value solid specifies a solid line.

Let's make, for example, a border with a thickness of 3 pixels, in the form of a solid line, in red:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* thickness 3px */
  border-style: solid;  /* in the form of a line */
  border-color: red;    /* red gules */
  width: 300px;
  height: 100px;
}

Результат:

In the following lessons we will look at working with borders in more detail.