Borders

Borders can be styled using the border-style, border-color and border-width.

Border-style can be amongst other be:

• none

• hidden

• dotted

• dashed

• solid

• double

See more styles with examples at MDN. The border-color property's value is set using any way of representing color, e.g. hex or rgb. Border-width defines the width of the border, and the value is described using a measure of size, e.g. px. The following code snipped would make a 4px wide dashed and blue border:

border-width: 4px;
border-style: dashed;
border-color: #0060A3;

Instead of defining each property on a separate line, you can use the border shorthand, e.g. for the example above you would write:

border: 4px dashed #0060A3;

In addition, you can have different styles for the different sides by adding -top, -bottom, -left or -right. E.g. if you want to have dashed borders on the side, while the top and bottom is solid, you would write:

border-top-style: solid;
border-bottom-style: solid;
border-left-style: dashed;
border-right-style: dashed;
border-width: 2px;

Using the side name (e.g. -top) can also be used for colors and widths.