CSS Borders

Style element borders with width, style, color, radius, and the border shorthand.

Overview

Borders sit between padding and margin in the box model. CSS gives you complete control over border appearance through several properties: - `border-width` thickness: thin, medium, thick, or a length value - `border-style` solid, dashed, dotted, double, groove, ridge, inset, outset, none - `border-color` any CSS color - `border` shorthand: width style color - `border-radius` rounds the corners - `border-image` uses an image as the border You can target individual sides: `border-top`, `border-right`, `border-bottom`, `border-left`, or mix longhand properties like `border-top-color` and `border-left-width`. `border-radius` is especially powerful it can make pill shapes, circles, and organic-looking rounded cards.

Key Points

•border shorthand: border: width style color (all three required)
•border-style must be set without it, the border is invisible
•Sides individually: border-top, border-right, border-bottom, border-left
•border-radius: 50% on a square element creates a circle
•border-radius: 9999px creates a pill shape on any element
•Outline is similar to border but does not affect layout (no box-model space)

Examples

Border shorthand and individual sides

/* All four sides */
.box {
  border: 2px solid #ccc;
}

/* Only bottom underline effect */
h2 {
  border-bottom: 3px solid royalblue;
}

/* Individual properties */
.card {
  border-width: 1px;
  border-style: solid;
  border-color: #e2e8f0;
}

border-radius for rounded shapes

/* Slightly rounded card */
.card {
  border-radius: 8px;
}

/* Pill-shaped button */
.pill {
  border-radius: 9999px;
}

/* Perfect circle (needs equal width/height) */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

border-radius: 50% on an element with equal width and height creates a circle.

Different border on each side

.highlight-box {
  border-top: 4px solid royalblue;    /* accent top */
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

/* Or use border-color shorthand: top right bottom left */
.element {
  border: 1px solid;
  border-color: royalblue #ddd #ddd #ddd;
}

Common Mistakes

Setting border-color without border-style border stays invisible
Using border-radius on an element with unequal width/height and expecting a circle
Confusing border with outline: outline does not affect layout; border does

Note

Use "border: none" or "border: 0" to remove browser-default borders from inputs and buttons. "none" is semantically clearer; both work.

CSS Borders

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What three values does the border shorthand require?