Borders — border, border-radius, and Shorthand

The border layer sits between padding and margin in the box model. Unlike padding and margin (which are invisible), borders are rendered on screen — and with border-radius, they become one of the most expressive visual tools in CSS.

The three required sub-properties

A visible border requires three things:

• border-width — how thick the border is (1px, 2px, etc.)
• border-style — what kind of line is drawn
• border-color — the color of the border

If any one of these is missing or set to none, the border will not appear.

.tour-card {
  border-width: 2px;
  border-style: solid;
  border-color: #2c4a1e;
}

Border style values

Value	Appearance
solid	A continuous unbroken line
dashed	A series of short dashes
dotted	A series of dots
none	No border (the default)
double	Two parallel solid lines

solid is by far the most common. dashed is useful for interactive zones, upload targets, or decorative dividers. dotted is rarely used in modern design.

The border shorthand

Writing all three properties separately is verbose. The shorthand combines them in one declaration — width, style, color in that order:

.tour-card {
  border: 2px solid #2c4a1e;
}

This is exactly equivalent to the three-property version above. The order is fixed: width, style, color.

Individual side borders

You can apply a border to a single side using the side-specific properties:

.site-nav {
  border-bottom: 2px solid #2c4a1e; /* bottom separator only */
}

.tour-card {
  border-left: 4px solid #2c4a1e; /* accent bar on the left */
}

The four properties are border-top, border-right, border-bottom, and border-left.

You can combine a full border shorthand with a side override:

.tour-card {
  border: 1px solid #d0e8c5;
  border-left: 4px solid #2c4a1e; /* thicker accent on left side */
}

border-radius

border-radius rounds the corners of an element’s border box. It is one of the most used properties in modern CSS — almost every card, button, and badge you see on the web uses it.

Single value — applies the same radius to all four corners:

.tour-card {
  border-radius: 8px;
}

Elliptical corners — two values set horizontal and vertical radii separately:

.badge {
  border-radius: 20px / 10px;
}

Individual corners — set each corner independently (clockwise from top-left):

.tour-card {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Circle — set border-radius: 50% on an element with equal width and height:

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

border vs outline

outline looks like a border but behaves differently in one critical way: outline does not affect layout. It is drawn outside the border box without pushing other elements away.

/* These look similar but behave differently */
button {
  border: 2px solid #2c4a1e; /* affects layout */
  outline: 2px solid #2c4a1e; /* does not affect layout */
}

Outlines are used most often for focus indicators — the ring that appears around interactive elements when navigated by keyboard. Do not remove the default outline from :focus without providing an alternative — it is a critical accessibility feature.

/* Do this instead of outline: none */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 74, 30, 0.4); /* custom focus ring */
}

Exercise

Add borders to three elements on the Summit Trail Outfitters site:

1. Tour cards with rounded corners:

.tour-card {
  border: 1px solid #d0e8c5;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background-color: #fff;
}

2. Navigation bottom separator:

.site-nav {
  border-bottom: 2px solid #2c4a1e;
  padding-bottom: 0.75rem;
}

3. A circular placeholder for a guide avatar — in your about.html or tours.html, find (or add) an element for a guide photo, then apply:

.guide-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #2c4a1e;
  background-color: #d0e8c5; /* placeholder color */
}

Open the browser and inspect the tour card in DevTools. Switch to the Computed tab and hover over the border layer in the box model diagram to see the border’s exact pixel contribution to the element’s total size.

Recap

• A visible border requires three things: border-width, border-style, and border-color.
• The shorthand border: 2px solid #2c4a1e sets all three in width-style-color order.
• Individual side borders: border-top, border-right, border-bottom, border-left.
• border-radius rounds corners; border-radius: 50% makes a circle from a square element.
• outline looks like a border but does not affect layout — used for focus indicators; do not remove without a replacement.

Lesson 05 introduces the display property — how block, inline, and inline-block change the way elements flow and respond to box model properties.