Borders on responsive images

Written by on CSS Wizardry.

Table of Contents
  1. Demo

This is a quick-tip type post, nothing major but a simple and effective tip for getting responsive borders on responsive images in your responsive designs.

As we know all too well, we can’t specify borders as percentages. This is a major annoyance if you’re working (or attempting to work) large borders into a responsive design. It may not be all that difficult with images, it turns out.

Instead of applying something like this:

img{
  max-width:100%;
  border:5px solid red;
}

Simply use:

img{
    max-width:98%;
    padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
    background:red; /* Color of the faux border. */
}

Demo

I made a jsFiddle and here is its output.

Now this does seem ridiculously obvious but a quick bit of Googling (other search engines are available) yielded nothing similar. Apologies is someone’s beaten me to this and I’m retreading old ground.



☕️ Did this help? Buy me a coffee!

Hi there, I’m Harry. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.


I am accepting new projects for Q3 2020

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk

    ViennaJS, Vienna (Austria), March 2020

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.