Image Styling

You will style images with borders, rounded corners, and soft shadows while keeping layout predictable.

What it is

Image styling in CSS usually means decorating the image box rather than editing the image file. The core properties are border, border-radius, and box-shadow. Think of an image as a rectangular box: the border wraps the box, the radius rounds its corners, and the shadow paints a layer behind or inside the box without changing its size.

Related terms include outline, filter: drop-shadow(), and object-fit. These solve different problems: outlines are often for focus states, drop shadows follow transparent image shapes, and object-fit controls how an image fills its box.

Why it matters

• Rounded corners make photos feel softer and more modern.
• Subtle shadows create depth, helping images stand out from a page background.
• Borders can separate images from nearby text or card edges.
• Consistent image styling improves visual hierarchy in galleries, cards, and hero sections.
• These effects are cheap to maintain because they live in CSS, not in the image file.

Syntax or steps

The smallest useful pattern is a single rule for the image:

img {
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

border draws a line around the image. border-radius rounds the corners and clips the image content. box-shadow uses four values: horizontal offset, vertical offset, blur radius, and color. A small vertical offset and medium blur usually look natural.

Example

<img src="photo.jpg" alt="A mountain lake" class="photo">

.photo {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Part-by-part explanation

• display: block removes the small inline gap under the image.
• max-width: 100% and height: auto keep the image responsive.
• border adds a thin frame.
• border-radius rounds the frame and the image corners.
• box-shadow adds a soft shadow below the image.

Common mistakes

• Forgetting responsive sizing. A large image can overflow its container. Add max-width: 100% and height: auto.
• Using a harsh shadow. Pure black shadows look heavy. Use rgba(0, 0, 0, 0.15) or another low-opacity color.
• Expecting outline to round corners. Use border-radius with border or box-shadow for rounded image frames.
• Ignoring the box model. Borders add width and height unless box-sizing: border-box is used.

When to use it

Practice

Guided exercise: Style an image with a 1-pixel light gray border, 8-pixel rounded corners, and a subtle shadow: box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);. Expected result: the image looks like a small card with a soft lift.

Challenge: Add an inner shadow so the image looks slightly pressed into the page. Hint: use box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);.

Quick check

Which property rounds the corners of an image and clips its content?

border-radius.

Summary

Image styling with borders, radius, and shadows is about decorating the image box, not the pixels inside it. Use border-radius for rounded corners and box-shadow for depth, while keeping images responsive and shadows subtle.