Border

CSS Border Summary

A border is a line around an element. Borders are commonly used to show the edge of buttons, cards, boxes, forms, images, and page sections.

.box {
	border: 2px solid black;
}

Border width controls how thick the border is. A larger number makes the border thicker.

.box {
	border-width: 4px;
}

Border width is usually written in pixels.

Border style controls what kind of line the border uses. The most common border style is solid.

.box {
	border-style: solid;
}

If a border does not show up, check whether it has a border style. A border needs a style before it can be seen.

Border color controls the color of the border.

.box {
	border-color: blue;
}

Most of the time, borders are written in one line. The common order is width, style, and color.

.box {
	border: 2px solid black;
}

This means the border is 2 pixels thick, uses a solid line, and is black.

You can put a border on only one side of an element. This is often used to create simple dividers.

.box {
	border-bottom: 1px solid black;
}

The property border-radius rounds the corners of an element. It is used often on buttons, cards, images, and form fields.

.box {
	border: 2px solid black;
	border-radius: 12px;
}