Borders

`border` draws a line around an element. `border-radius` rounds the corners. Together they handle most "outlines".

3 min read Level 1/5 #css#border#border-radius

What you'll learn

Set border width, style, color
Use the `border` shorthand
Round corners (any shape)

border draws a line around an element. Three properties: border-width, border-style, border-color — usually combined in the shorthand.

The Shorthand

border: 1px solid #ddd;
border: 2px dashed tomato;
border: 4px solid currentColor;

Style values: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden.

solid and dashed are by far the most common.

Per-Side

border-top:    1px solid #ddd;
border-bottom: 2px solid currentColor;
border-inline: 1px solid #ddd;    /* logical — left+right */

`border-radius` — Round Corners

.card   { border-radius: 8px; }            /* all four corners */
.pill   { border-radius: 9999px; }          /* fully round if height < width/2 */
.circle { border-radius: 50%; }             /* circle for a square box */

Per-corner:

border-top-left-radius: 8px;
border-radius: 8px 16px 24px 32px;   /* top-left, top-right, bottom-right, bottom-left */
border-radius: 8px 16px;             /* (top-left & bottom-right) (top-right & bottom-left) */

Elliptical corners with /:

border-radius: 50% / 30%;   /* horizontal / vertical radius */

`outline` — Like Border, Doesn’t Affect Layout

button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

outline is drawn OUTSIDE the border without changing the element’s size. Perfect for focus rings — borders push neighbors. outline-offset pushes the outline away from the element.

`border-image`

Use any image (or gradient) as the border:

.fancy {
  border: 4px solid;
  border-image: linear-gradient(45deg, tomato, gold) 1;
}

Less common; mostly used for decorative frames.

Up Next

Shadows — softer alternatives to borders.

Shadows →