January 2026

Create a Dynamically Sized Image Border in CSS

I'm using container queries to do a basic border sizing for my images. It provides a larger border when there's enough size and drops to a smaller one on narrower screens. I tried playing around with clamp. It never quite worked at both ends of the spectrum.

Output

The words 'Test Image' in blue on a red background

HTML

<div class="example-container">
  <div class="example-wrapper">
    <img alt="The words 'Test Image' in blue on a red background" src="/neo-files/images/test-image-alfa-3000x2000/test-image-alfa-3000x2000.avif" /> 
  </div>
</div>

CSS

.example-container {
  container-type: inline-size;
}

.example-wrapper {
  background: rebeccapurple;
  padding: min(10%, 6rem);
}

@container (width < 560px) {
  .example-wrapper {
    padding: 1rem;
    background: green;
  }
}

end of line

Endnotes

There's probably a way to get clamp to do what I want. This does what I need for now.