CSS border properties

The border sits between padding and margin. It is the first property in this project that makes the links look like buttons, because it draws the edge of the box that padding gave them in lesson 3.

Adding the border

.btn {
  /* Lesson 2: margin */
  margin: 0 0.5rem 0.5rem 0;
  /* Lesson 3: padding */
  padding: 0.75em 1.5em;
  /* Lesson 4: border */
  border: 2px solid #1d4ed8;
  border-radius: 0.5rem;
}

Reload. The links now sit in blue outlined boxes with soft corners, and the <button> has swapped its default border for the same blue one. It keeps its gray default background for one more lesson. The value #1d4ed8 is a hex color, a medium blue; lesson 5 explains how to read it.

One shorthand, three parts

border sets width, style and color for all four sides at once. The three values can come in any order, but the style is the one you cannot leave out. Its initial value is none, and a border whose style is none is drawn with a width of zero no matter what width you wrote. That is why border: 2px #1d4ed8; draws nothing at all.

Each part has its own property (border-width, border-style, border-color), and each side has its own shorthand (border-top, border-right, border-bottom, border-left). So border-bottom: 4px solid #1d4ed8; would draw a single bar under the text. Lesson 8 uses border-color on its own to change the color on hover without repeating the width and style.

Border styles

For buttons, solid is the practical choice. The 3D styles date from the early web and look like it.

Rounded corners

border-radius: 0.5rem rounds every corner with an 8px radius at the default font size. The radius clips the background as well, so the shape holds even on an element with no border. A few values to compare:

.btn { border-radius: 0; }        /* sharp corners */
.btn { border-radius: 0.25rem; }  /* barely rounded */
.btn { border-radius: 999px; }    /* pill shape */

The pill works because the browser scales oversized radii down until they fit the box, so a huge value turns the short sides into half circles. Like padding, border-radius accepts up to four values. They start at the top-left corner and go clockwise.

Border or outline?

Lesson 1 used outline for a quick test. The two look alike, but they behave differently:

• A border takes up space. A 2px border makes the box 4px wider and 4px taller, unless you change box-sizing in lesson 9.
• An outline is drawn outside the border without taking space, so nothing around it moves. It cannot be set per side, and outline-offset pushes it away from the box.

That makes outline the right tool for the keyboard focus ring in lesson 8, where you want a clear marker that never nudges the layout.

Why the border matches the background color

Lesson 5 gives the main buttons a background in the same blue as the border. A border that matches its background looks invisible, so why keep it? There are two reasons. The light variant, btn-light, gets a white background, and there the blue border is its entire outline. And because every button carries the same 2px border, all of them have the same outer size, so a light button sits exactly level with a dark one.

Try it: in the online HTML editor, delete the word solid from the shorthand and reload, and the border vanishes. Put it back as dashed to see the same width in a different style, then return to solid.