Blogger images default no border, flat, boring. Styled images = border, shadow, rounded, hover zoom = looks pro like magazine, +30% time on page.

In Post #124, style images in Blogger.

Step 1: Add Image CSS Once in Theme

  1. Blogger → Theme → Edit HTML
  2. Find ]]></b:skin>
  3. Paste above it:
/* Image Styles Post 124 */
.img-border{border:3px solid #000;padding:4px;border-radius:8px;}
.img-rounded{border-radius:16px;}
.img-circle{border-radius:50%;}
.img-shadow{box-shadow:0 8px 20px rgba(0,0,0,0.15);}
.img-hover{transition:0.3s;overflow:hidden;display:inline-block;}
.img-hover:hover{transform:scale(1.03);}
.img-caption-wrap{position:relative;display:inline-block;}
.img-caption-wrap span{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);color:#fff;padding:8px 10px;font-size:13px;border-radius:0 0 8px 8px;}
  1. Save theme

Step 2: Apply Border to Images - 5 Styles

1. Simple Black Border

In post HTML mode, add class to img:

<img src="YOUR-IMAGE.jpg" class="img-border" alt="Blogger border" style="max-width:100%;"/>

2. Rounded Corners + Shadow (Most Used)

<img src="YOUR-IMAGE.jpg" class="img-rounded img-shadow" alt="Rounded shadow" style="max-width:100%;"/>

3. Circle Image (For Author, Testimonials)

<img src="YOUR-IMAGE.jpg" class="img-circle img-border" alt="Circle" style="width:120px;height:120px;object-fit:cover;"/>

4. Hover Zoom Effect

<a href="YOUR-IMAGE.jpg" class="img-hover img-rounded img-shadow" target="_blank">
<img src="YOUR-IMAGE.jpg" alt="Hover zoom" style="max-width:100%;display:block;"/>
</a>

5. Image with Caption Overlay (No Need Post #125)

<div class="img-caption-wrap img-rounded img-shadow" style="max-width:100%;">
<img src="YOUR-IMAGE.jpg" alt="Caption" style="max-width:100%;display:block;border-radius:16px;"/>
<span>This is caption - Blogger template preview</span>
</div>

Step 3: Inline Method - No Theme Edit (For One Image)

<img src="YOUR-IMAGE.jpg" alt="Inline border" style="max-width:100%;border:3px solid #000;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.15);padding:4px;"/>

Change: border color #000 to #22c55e green, #3b82f6 blue, #ef4444 red. Padding 4px to 0 for no gap.

Step 4: Make All Post Images Auto Border + Shadow

If you want all images in all posts auto have rounded + shadow without adding class each time:

.post-body img{border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,0.1);max-width:100%;height:auto;}

Paste above ]]></b:skin> - all images auto styled.

Step 5: Before / After

Before After Post #124
Flat image, no border, square corners Rounded 16px, shadow, border, hover zoom = pro
Bounce rate high +30% time on page, Pinterest share increase

Post #124 Complete.

Next Post #125: How to Add Caption to Images in Blogger - figure + figcaption SEO method.