Borders

Synopsis: border: <thickness> <border_style> <color>

.foo {
    border: 1px solid red;
}
.bar {
    border: 1px dotted red;
}

NOTE

Almost all borders are solid nowadays, we don't need any other style of borders.

Specific border properties

Sub-Borders

Border of an element can be styled separately.

.foo {
    border: 1px solid red;
    border-top: 5px solid black; /* [!code ++]  */
    border-left: 5px solid black; /* [!code ++]  */
}

border is the shorthand property of border-top, ....

NOTE

Properties like border are called shorthand property, they can control multiple style targets of an element with same value. Another common shorthand property is margin.

IMPORTANT

If a shorthand property is defined after specific properties, it overwrites the previous values. The order matters!

Border width

border-width is also a shorthand property, has same usage as margin.

.bar {
    border: 1px dotted red;
    border-width: 10px 5px 3px 4px; /* for top-right-bottom-left */
}

Border style

.foo {
    border-style: solid dashed dotted double;
}