You spend hours perfecting your site's visual design. Typography? Dialed in. Spacing? Perfect. Color theory? Chef's kiss.

Then an image fails to load.

[       ]

That's what your users see. A tiny placeholder. Truncated alt text in Arial. Maybe a sad broken image icon if they're lucky.

Most developers treat this as an edge case. It's not. CDN failures happen. Ad blockers are everywhere. Slow mobile networks affect half your users. On e-commerce sites, a missing product photo costs sales. On marketing pages, a broken hero image kills credibility instantly.

CSS gives you complete control over how broken images display. This guide shows you how to style alt text so broken images don't look broken.

How Browsers Display Alt Text (And Why It Looks Bad)

When an <img> element fails to load, browsers display its alt attribute using default styling that hasn't changed in 20 years.

Chrome and Edge show 12px system font, black text, no padding, and a tiny broken image icon. Text truncates at container width. Firefox does the same but truncates more aggressively.

Safari has a different problem entirely. When an image breaks, Safari collapses it to 0x0 pixels. Your alt text disappears. Unless you set explicit dimensions, broken images are completely invisible in Safari.

System fonts never match your design. 12px text with zero padding is hard to read. And Safari makes broken images vanish entirely. Three problems. Let's fix them.

Basic Alt Text Styling: Typography and Layout

The foundation: treat <img> elements like text containers.

img {
  /* Match your body font */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #374151;

  /* Add breathing room */
  padding: 1rem;

  /* Visual structure */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
}

Your alt text now uses your site's typography instead of system defaults.

The Safari Width Fix

Safari collapses broken images to 0x0. Fix this by ensuring all images have explicit dimensions:

img {
  min-width: 100px;
  min-height: 100px;
}

Even better, set width and height attributes directly on your <img> tags. This prevents layout shifts AND ensures Safari displays alt text.

Handling Long Alt Text

Without constraints, long alt text breaks your layout:

img {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
}

Pseudo-Elements for Custom Error Messages

Basic styling fixes typography. Pseudo-elements let you add custom messages and context. When an image is broken, browsers treat it like an inline element that can contain generated content.

img::before {
  content: "Image failed to load: ";
  font-weight: 600;
  color: #dc2626;
  display: block;
  margin-bottom: 0.5rem;
}

You can also replace the browser's generic broken-image icon with a background image for more control over the visual treatment.

Complete Fallback Pattern

Here's a production-ready combination of everything above:

img {
  /* Prevent Safari collapse */
  min-width: 100px;
  min-height: 100px;
  width: 100%;
  height: auto;

  /* Typography */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;

  /* Visual structure */
  padding: 1rem;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;

  /* Text handling */
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

img::before {
  content: "Image unavailable";
  display: block;
  font-weight: 600;
  color: #dc2626;
  margin-bottom: 0.5rem;
}

This handles Safari's collapse behavior, displays clear error messaging, maintains your design language, and gracefully handles long alt text. Works in all modern browsers.

Cross-Browser Quirks

Different browsers implement <img> fallbacks differently. Two things to watch for.

Firefox pseudo-element support: Older Firefox versions required display: block or display: inline-block on images for ::before and ::after to render. Adding display: inline-block with vertical-align: middle fixes this without breaking layout.

Safari dimension requirements: Safari needs explicit dimensions. You have three options: width/height HTML attributes, CSS aspect-ratio, or container-based sizing with object-fit: cover. Pick whichever fits your layout.

To test your fallbacks during development, point images at invalid URLs or use browser DevTools to block image requests (Network panel, Block request URL pattern).

Real-World Examples

E-Commerce Product Grid

Product images are critical. When they break, users need to know what product they're looking at. The key properties: set aspect-ratio: 1 / 1 to maintain grid layout, use display: flex with centering to position the alt text cleanly, and apply a subtle gradient background so the empty space doesn't look like a bug.

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 250px;
  font-family: inherit;
  font-size: 16px;
  color: #1f2937;
  text-align: center;
  padding: 2rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  word-wrap: break-word;
}

Broken product images now show the product name from alt text, centered in a clean container that keeps your grid intact.

Avatar Fallbacks

User avatars break often (deleted accounts, CDN issues). Style the fallback as a colored circle with centered text so the alt text (usually the user's name) displays cleanly:

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  overflow: hidden;
}

The alt text will overflow the small circle, but the overflow: hidden keeps it tidy. For a proper initials-based fallback, you'd need JavaScript to extract the first letters—CSS alone can only display whatever text is in the alt attribute.

Hero Images

A broken hero image destroys credibility above the fold. Give it a dark gradient background, large centered typography, and generous padding. The alt text becomes a headline-style fallback instead of a broken placeholder.

Accessibility Considerations

Styling alt text improves visual UX, but don't break accessibility in the process.

Keep alt text semantic. CSS changes presentation, not meaning. Your alt text must still describe the image accurately regardless of how it's styled. "See image for details" is bad alt text whether it's in Arial 12px or your custom typeface.

Screen readers ignore CSS styling. They only announce the alt text content. Your styled fallbacks are purely visual—they don't affect what assistive technology reads. Test with VoiceOver (Cmd+F5 on Mac) or NVDA on Windows.

Maintain color contrast. If you add colored backgrounds or text, maintain WCAG AA contrast ratios (4.5:1 for normal text). Gray-800 text on Gray-100 backgrounds works well. Use WebAIM's Contrast Checker to verify.

Never hide broken images. Don't use display: none or visibility: hidden on broken images—screen readers lose context entirely. If you want to de-emphasize them, use opacity or a dotted border instead.

Production Checklist

Before shipping CSS-styled alt text fallbacks:

Typography

• Font matches site design
• Size readable (16px minimum)
• Color has sufficient contrast (4.5:1 ratio)

Layout

• Min-width/min-height set (Safari fix)
• Long text wraps without breaking layout
• Works in grid/flex containers

Cross-Browser

• Tested in Chrome, Firefox, Safari, Edge
• Pseudo-elements display correctly
• Dimensions prevent Safari collapse

Accessibility

• Alt text is descriptive and semantic
• Color contrast meets WCAG AA
• Screen reader testing completed

The Other Half of the Problem

Styling broken images is damage control. It makes failures look professional instead of broken. But the styling only works when images have descriptive alt text to display in the first place.

If your alt text fields are empty, a styled fallback shows... nothing. The CSS patterns in this guide need actual content to work with.

AltText.ai generates context-aware alt text for all your images automatically. It integrates with WordPress, Shopify, and custom sites. When images break, well-written alt text styled with these CSS patterns creates a professional fallback. When images load, that same alt text improves SEO and accessibility.