Backgrounds and Borders

Now that you know every element is a box, let us decorate those boxes. Backgrounds, borders, rounded corners, and shadows are how plain rectangles start looking like designed pieces of a website.

Background color

The background-color property fills the whole box, content and padding included:

.highlight {
  background-color: #fff3cd;
  padding: 16px;
}

Notice the padding in that rule. A background color with no padding puts text right against the colored edge, which looks unfinished. Whenever you give something a background color, give it some padding too. They are best friends.

Borders

A border needs three things: how thick, what style, and what color. The border shorthand takes all three in that order:

.photo {
  border: 3px solid #2c3e50;
}

The style is almost always solid, though dashed and dotted exist and can be fun for playful designs. You can also put a border on just one side, which makes a nice accent:

blockquote {
  border-left: 4px solid steelblue;
  padding-left: 16px;
}

Rounded corners

Sharp rectangles can feel stiff. The border-radius property rounds the corners, and it works even if the element has no visible border:

.card {
  background-color: white;
  border-radius: 12px;
}

Small values like 4px to 8px give a gentle softness. Larger values like 16px feel friendly and modern. And here is a fun one: on a square image, border-radius: 50%; turns it into a perfect circle. That is how profile pictures are made round.

Soft shadows

A box-shadow makes a box look like it is floating slightly above the page. The property takes four values: how far the shadow moves right, how far it moves down, how blurry it is, and its color:

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

Putting it together

.tip {
  background-color: #eef7ee;
  border: 1px solid #cde3cd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

Five properties, and suddenly you have a polished tip box you could drop into any page of your website. Save this rule somewhere; you will reuse the pattern constantly.