13. Box Model Deep Dive: Borders

The border is the line that sits between the padding and the margin, visually defining the edge of the element.

The Three Essential Border Properties

To see a border, you must define all three of these properties:

1. border-width: How thick the line is (e.g., 1px, medium).
2. border-style: The appearance of the line (e.g., solid, dotted, dashed, double).
3. border-color: The color of the line.

1. Longhand Example

css .card { border-width: 3px; border-style: solid; border-color: black; }

2. The Border Shorthand

It is much more common to use the shorthand property border:

css /* Format: width style color */ .card-shorthand { border: 2px dashed red; }

Individual Sides

You can style borders on individual sides using properties like border-top, border-right, etc., or by setting specific properties for a side (e.g., border-bottom-style: double;).

css /* Only a bottom border */ .footer { border-bottom: 5px solid navy; }

/* Different styles on different sides */ .badge { border-top: 1px solid gray; border-bottom: 5px double black; }

Border Radius

To create rounded corners, use the border-radius property. A common value for circular elements is 50%.

css .rounded-box { border-radius: 10px; /* Applies to all four corners */ }

.circular-image { width: 100px; height: 100px; border-radius: 50%; /* Makes the box a perfect circle/oval */ }