Backgrounds and Borders Done Properly

You already used simple background colors and borders in earlier lessons, almost in passing. This lesson treats them properly, because backgrounds and borders are where a lot of visual polish actually comes from, and there are several properties and tricks beginners rarely discover on their own.

Background Images And Sizing

Start with background-color, which you know, but background-image is where things get more interesting. You can layer an image behind your content, and control exactly how it repeats, sizes, and positions.

.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-size: cover scales the image so it completely fills the element, cropping whatever doesn't fit, which is the standard choice for full-width hero banners. The alternative, contain, scales the image to fit entirely inside the element without cropping, which can leave empty space but guarantees nothing is cut off. A common beginner mistake is leaving out background-repeat: no-repeat, which causes small images to tile repeatedly across the whole element in an ugly grid, since tiling is the browser's default behaviour for background images.

You can also layer a background image on top of a background color, and the color will show through any transparent parts of the image, or anywhere the image hasn't loaded yet.

.card {
  background-color: #1a1a2e;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
}

That second line is a CSS gradient, which is actually just another kind of background-image, generated by the browser instead of loaded from a file. Gradients are extremely common for subtle depth effects, buttons, and banners, and they cost nothing to load since there's no image file at all.

.button-primary {
  background: linear-gradient(to right, #ff512f, #dd2476);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
}

Borders And Rounded Corners

Now, borders. You already know the basic shorthand border: 1px solid black;, which sets width, style, and color in one line. Borders can be set per side individually, just like padding and margin.

.card {
  border-top: 2px solid #eee;
  border-bottom: 1px solid #eee;
}

Border-radius rounds corners, and it's one of the most used properties in modern design, from subtle rounding on buttons to fully circular avatars.

<img src="iron-man.png" class="avatar" alt="Iron Man">

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

Setting border-radius to 50% on a square element turns it into a perfect circle, which is exactly how most profile picture avatars across the web are made. Note the object-fit: cover property here too: when you force a fixed width and height on an image, the image would normally stretch and distort to fit; object-fit: cover instead crops it proportionally so it still fills the box without warping, the same idea as background-size: cover but for actual <img> elements rather than CSS backgrounds.

Adding Box Shadow Depth

Box-shadow is another property that adds a surprising amount of polish for very little code. It takes horizontal offset, vertical offset, blur radius, and color (in that order), plus an optional spread value.

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

A soft, low-opacity shadow like this is what gives cards that "lifted off the page" feeling common in modern web design. A common beginner mistake is using a strong, solid-colored shadow with full opacity, which looks harsh and dated rather than subtle; keeping the alpha value low (around 0.1 to 0.25) almost always looks better.

Layering Multiple Backgrounds

It's also worth knowing that border and background-image both support multiple values layered together, which is how some of the more elaborate effects you see on professional sites are built without any actual image files. You can stack several gradients on top of each other by separating them with commas in background-image, with the first one listed appearing visually on top of the ones after it, letting you combine, for example, a subtle color wash with a soft radial highlight in a single property.

.hero {
  background-image:
    radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(135deg, #1a1a2e, #16213e);
}

This layering technique is exactly how a lot of "premium-looking" dark hero sections are built: a soft glow in one corner, sitting on top of a deeper gradient base, achieved entirely with CSS and no actual photograph or exported graphic involved at all.

You can combine multiple backgrounds, borders, and shadows on one element, and this is genuinely how most "modern-looking" cards and buttons are built, not through images, but through layered CSS effects.

.profile-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
}

Practical Tips And Exercise

Practical tip: when designing a card or button, build it up one property at a time and check visually after each one, rather than writing ten properties at once. Backgrounds, borders, and shadows interact visually in ways that are hard to predict purely by reading code.

Give it a try: build a profile card for Tony Stark with a white background, a light border, rounded corners, a subtle box-shadow, and a circular avatar image using border-radius and object-fit. Compare how it looks with the shadow removed versus included, to feel exactly how much that one property contributes.