The border property creates an outline around the edge of an element. Borders are useful for visually containing or separating content. This property comes with three separate characteristics to manipulate: style, width, and color.

The border-style property determines the consistency of the border, and needs to be defined for a border to show at all. There are multiple styles to choose from.

The border-width property controls the thickness of the border lines. This can be set using a pixel measurement or one of the keywords “thin”, “medium” or “thick”.

Finally, border-color will establish your border’s coloration. This property is set the same way as other color-based properties--choosing a color with Hex, RGB, HSL or color words.

Instead of listing each sub-property, they can be combined into one line using the plain “border” property. If you want your border to be a solid line with 3px thickness and colored green, you put them all together, separated by spaces.

Like with padding and margin, your border properties can be set to all sides or individual sides. Just make sure that the direction word comes right after “border”. If you’re setting the sub-properties separately, the name of the sub-property is tacked on with a hyphen like usual, but just goes to the end.