back to top

info(at)sypo.uk01539 741461

Creating a Frame Around An Image

Posted on 12th November, 2019

Landscape with frame

By Mark Syred. Difficulty level: Basic

Something quite simple this time, but that does add a nice effect to an image on a webpage. And, again, you need not look very far for an example of this effect. Just look at the photo at the top of this article. The picture shown there has a little white frame around, a grey border and a, '3D effect,' is added with a shadow. But how is this achieved? It's all in the CSS.

.framed-pic {
    display: block;
    width: 90%;
    max-width: 800px;
    height: auto;
    padding: 7px;
    border: 1px solid #AFAFAF;
    background-color: white;
    margin: 30px auto;
    box-shadow: 0px 0px 20px #777;
}

The part of the CSS that deals with the size of the image, namely:

    width: 90%;
    max-width: 800px;
    height: auto;

helps the image to stay reponsive.

To create the frame:

    padding: 7px;
    border: 1px solid #AFAFAF;
    background-color: white;

Here, the padding creates space around the image (which you could set as percentages to help keep it responsive) and the background-colour fills in this padded space to give the illusion of a white frame. The grey border can be set to whatever colour you prefer, as can the background colour. You could even add a picture as the background, but, I wouldn't recommend it as this would create another round trip for the browser, slowing down load times a little. If you did want to create a more fancy frame, editing the image in your chosen photo editing software first would be the better option.

You could also do that to create the frame I've discussed above, but, this has the advantage that the CSS is being served anyway and the image that needs to be fetched is that little bit smaller. And, anything you can do to save the load on a mobile browser is a help.

The shadow

The final line in the CSS above adds the shadow to the image, like this:

    box-shadow: 0px 0px 20px #777;

Unpacked, this centres the shadow on the image, sets a blur of 20px and sets the shadow's colour to a medium grey. Altogether, this produces a simple effect to help images on a website standout.

Share this article

This website uses cookies to deliver the best experience whilst browsing. More info

Accept