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:
Instead of defining each property on a separate line, you can use the border shorthand, e.g. for the example above you would write:
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:
Using the side name (e.g. -top
) can also be used for colors and widths.
Last updated
Was this helpful?