CSS Border Summary

A border draws a line around an element’s content and padding, marking the edge of the box.

.card {
	border: 1px solid gray;
}

Borders are part of the CSS box model. They sit between padding and margin.

A Border Needs Width, Style, And Color

The common shorthand border property includes the border width, style, and color.

.notice {
	border: 2px solid black;
}

2px is the width, solid is the style, and black is the color.

The border-radius property rounds the corners of a box.

.card {
	border: 1px solid gray;
	border-radius: 8px;
}

The border does not need to be visible for border radius to affect the shape of a background.

A border adds to the space a box uses unless the project uses box-sizing: border-box.

Use borders when the edge of a box needs to be visible or when nearby areas need a clear separation.