Borders

Let's look at borders more closely. We've already written one: border: 1px solid red. The border property takes three values:

border: width style color;

• The width, usually in pixels, for example 2px.
• The style of the line: solid, dashed, dotted or double. The value none means no border.
• The color, in any format you know, for example #476958.

This is what the styles look like: solid dashed dotted double

The order of the values doesn't matter, so border: solid 2px #476958 works too. You can even leave out the width or the color, and the browser uses a default one. But don't forget the style: its default value is none, so border: 2px red shows no border at all.

For a border on one side only, there are the properties border-top, border-right, border-bottom and border-left, which take the same three values. For example, border-bottom: 1px solid gray draws a line under an element.

The red borders have shown us the boxes. Now we'll replace them with nicer ones: the two groups of text and the list of breeds will become cards with a white background and a green border.