Colors, Backgrounds & Borders

Why This Trio Matters

Color, background, and border properties are the fastest way to make raw HTML look intentional. They're also where most beginners start experimenting — small changes here have an immediate, visible effect, which makes them a great way to build intuition for how CSS works.

• ✓CSS supports several color formats — named colors, hex, and rgb() — each with its own tradeoffs.
• ✓Backgrounds aren't just solid fills; they can hold images, gradients, and positioning rules.
• ✓Borders are defined by three parts together: width, style, and color.

Three Ways to Write a Color

CSS accepts several notations for color. They're interchangeable — pick whichever is clearest for the situation.

Filling and Framing an Element

The background group of properties controls what fills the space behind an element's content — a flat color, an image, or a gradient.

.card {
  background-color: #fff1e6;
  background-image: url("texture.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* A gradient background, no image file needed */
.banner {
  background: linear-gradient(135deg, #e8590c, #c2447a);
}

Width, Style & Color Together

A border needs all three parts to render: a width, a style (solid, dashed, dotted...), and a color. border-radius rounds the corners after the border is set.

/* Longhand: three properties */
.box {
  border-width: 3px;
  border-style: solid;
  border-color: #e8590c;
}

/* Shorthand: same result, one line */
.box {
  border: 3px solid #e8590c;
  border-radius: 14px;
}

Color Choices Affect Readability

A background and text color that are too close in brightness make content hard to read, regardless of how nice the colors look individually.

Breaking Down What You Just Learned

Try It Yourself

Build a Set of Styled Cards

Recap

Key Takeaways