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:

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

#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.