How do CSS border properties work?

A border is the frame drawn around an element; it has three parts — width, style and colour — which you can set separately or all at once with the border shorthand.

The three sub-properties:

border-width: 1px;     /* how thick */
border-style: solid;   /* what kind of line */
border-color: red;     /* what colour */

In practice almost everyone uses the shorthand, which packs all three into one declaration in the order width–style–colour:

border: 1px solid red;

You can also target a single side, e.g. border-left: 2px dashed blue; or even one aspect of one side with border-top-width: 3px;.

The border-style is the part with the most options:

A frequent partner is border-radius, which rounds the corners:

.box {
    border: 2px solid #333;
    border-radius: 8px;   /* rounded corners */
}

Note that border-style matters: a border with a width and colour but no style simply will not show, because the default style is none.