CSS: How to Add Border to an Image

Images are a key part of modern web design. Sometimes, adding a border around an image can help it stand out, fit better into your layout, or enhance your site’s overall aesthetic.

In this post, we’ll show you how to add borders to images using CSS, including various styling options like border color, width, radius, and style.

Table of Contents

✅ Basic Syntax

To add a border around an image, you use the border property in CSS:

img {
  border: 2px solid black;
}

🖼️ Example: Simple HTML Image

<img src="images/photo.jpg" alt="Sample Photo" class="bordered-img">

.bordered-img {
  border: 3px solid #333;
}

✅ This creates a solid dark gray border, 3 pixels wide, around the image.

🎨 Customize Your Image Border

🔹 Border Width

Set how thick the border should be:

img {
  border: 5px solid #000;
}

🔹 Border Color

Use any valid CSS color:

img {
  border: 3px solid red;
}

Or use HEX/RGB values:

img {
  border: 3px solid #3498db; /* Blue */
}

🔹 Border Style

CSS supports multiple styles:

Style	Description
`solid`	A solid line
`dotted`	Dots as a border
`dashed`	Dashes as a border
`double`	Double solid lines
`groove`	3D grooved border

img {
  border: 4px dashed green;
}

🟣 Rounded Borders (Using `border-radius`)

Make image corners rounded for a softer look:

img {
  border: 3px solid #000;
  border-radius: 10px;
}

🔄 Circular Image Border

To make a circular image (ideal for profile pictures), use:

img {
  width: 150px;
  height: 150px;
  border: 3px solid #555;
  border-radius: 50%;
}

🧪 Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .fancy-img {
      border: 5px double #ff6347;
      border-radius: 12px;
      width: 300px;
    }
  </style>
</head>
<body>

  <h2>My Travel Photo</h2>
  <img src="images/beach.jpg" alt="Beach" class="fancy-img">

</body>
</html>

🧠 Bonus Tips

Use box-shadow for extra depth: img { border: 2px solid #000; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
Avoid borders for decorative images that don’t need emphasis.
Always include alt text for accessibility.

🎯 Conclusion

Adding a border to an image with CSS is simple and effective for improving visual presentation. Whether you’re going for a clean solid line or a stylish dotted frame, CSS gives you full control over the look.

With a little creativity using border, border-radius, and box-shadow, you can beautifully enhance how your images appear on any webpage.