CSS · Chapter 8 of 44

CSS Borders

The border property adds a visible edge around an element, defined by width, style, and color, such as border: 2px solid black;.

You can also style individual sides using border-top, border-right, border-bottom, and border-left, and round corners with border-radius.

Syntax

border: width style color;

Border shorthand

border combines width, style, and color in one line. Styles include solid, dashed, dotted, and double.

border-radius rounds the corners of an element, from slight rounding to fully circular shapes.

Example 1 (css)

.box {
  border: 2px solid #333;
  border-radius: 8px;
}

Output

A box with a solid dark gray border and rounded corners

The shorthand sets width, style, and color; border-radius rounds the corners.

💡 Note: A border-radius of 50% on a square element creates a perfect circle.