31 July, 2011

Written by Harry Roberts on CSS Wizardry.

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