Borders & Outlines

Borders draw lines around elements — solid, dashed, coloured, on one side or all four, and with rounded corners. Outlines look similar but sit outside the box without affecting layout, which makes them ideal for focus indicators.

Border basics

Try it yourself
Result

The border shorthand takes a width, a style and a colour, in any order. The style is required — without it, no border appears. Other styles: ridge, inset, outset, none and hidden.

Individual sides

Try it yourself
Result

Every side has its own properties (border-top, border-left-color, …), and there are longhands for width, style and colour on all four sides: border-width, border-style, border-color.

Rounded corners

Try it yourself
Result

border-radius works even without a border, rounding the background. 50% on a square makes a circle; a very large value makes a "pill". Lesson 18 covers more shapes.

Image borders

Try it yourself
Result

border-image slices an image or gradient into the border area. It's niche, but useful for decorative frames. Note that it ignores border-radius.

Outlines

Try it yourself
Result

Differences from borders:

  • Outlines take up no space — adding one never shifts the layout.
  • outline-offset moves the outline away from (or into) the element.
  • Outlines follow border-radius in modern browsers.
  • You can't set different outlines per side.
Never write outline: none on focus without a replacement. Keyboard users rely on the focus ring to see where they are. If you remove the default, provide an equally visible :focus-visible style.

Borders and box size

Try it yourself
Result

Changing a border's width on hover makes content jump. Change its colour instead, or use an outline or box-shadow for the effect.

Try it yourself

Try it yourself
Result
PreviousThe Box Model