Tutorials

Table of contents
Close

How to add a frame around all images on your website

Adding a small frame around all the images on your site is not as hard as you might think. All you need to do is add this small bit of CSS to your CSS file and you should have sweet looking images. My plan is too add a small white border with a darker thin outer border. Please be aware that is will add the "framed" effect to all images. If this is not the desired outcome, instead of using img, create a CSS class such as .img-framed and add this class to all images which you would like framed.

img{
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    padding: 10px;
} 

OR create a class that you can then add to each image

.img-framed{
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    padding: 10px;
} 

Example

Here is an example of an image using the code above to create a "framed" image effect:

To change the amount of white around the image just make a simple adjustment to the padding property. To make the white smaller try using padding: 3px;.