How to add border, frame and shadow effects to your wordpress images

Do you like to hang pictures around your wall without framing it? No one does! A picture without a frame doesn’t look cool and it is not even a picture, it is just a plain image. Whether it is your living room or your website, adding border or framing an image will give an enhanced look. Here let’s see how to add border, frame and shadow effects to your wordpress images.

In order to work with images, wordpress has a well build in media library. One can simple insert images in to their posts and pages by uploading it, selecting from library or inserting straight from URL. When you insert images into your post or pages you will see several options like adding titles, captions, alt text, alignment and size. All these are basic settings for an image, but do you know that you can add a border, style and CSS class to an image.

How to add border, frame and shadow effect to wordpress images

Here we will see how to add frames to individual images from wordpress visual editor, adding borders to all images with a little CSS trick and adding border to an image with a shadow.

The four images below will illustrates how an unframed, framed and shadowed picture looks in your posts or pages.

• The first image is a plain one with no border or shadow.
• The second image has a thin black border.
• The third image has a shadow with no border.
• The last one has both border and a shadow.

So why to border or frame an image

People use borders and frames to images in order to enhance the image look. But the actual fact is frames are used to justify the image edge. Let’s us assume that your sites background color is white, now the inserted image looks normal in your posts only that too has a white background.

An image that is incomplete, cropped and that has a colored background looks odd and unnatural like this.

Add borders to individual images in wordpress

In your wordpress dashboard go to posts or page. Now insert image as would normally do from visual editor. After inserting click on that image and you will see an edit icon at the top left corner. Click and when you do that, you will see a pop up window where you can edit your image.

Switch to advanced settings tab which most people don’t notice it usually. Now in advanced image settings you will see a blank field named border. Just enter your number (1, 2 or 3) in pixels and it will add a tiny little black border around your image.   This is where and how you need to add border to individual images. By changing the values you can make the border thin or thick as you like.

Related: how to change font family, color, style and size in wordpress

Adding frames to all images in wordpress using CSS

Adding border to each image individually is not a good idea and it takes time.  So with a little CSS you can add border to all your images that you inserted in your posts and pages.

img {
border:2px solid #000000;
}

Add the above one in your theme’s custom CSS file and it will add a tiny black border to all your images.

Don’t like the look, then add this one below.

img {
border:2px solid #000000;
border-radius:25px;
}

Here the border color and size are same, but the image will have a curvy edge. Try with different color and adjust the border size and radius to make the image more elegant.

Here is another sample:

img {
   padding:7px;
   border:1px solid #1b3041;
   background-color:#62ade6;
}

In all the above samples the border style is solid. You can try different borders by replacing the solid with dotted, dashed, double, groove, ridge etc.

Adding shadow to wordpress images

Adding shadows to your wordpress images is same as what you did above for frames and borders, but with a one more line of CSS. Here the below CSS will give a shadow effect to all your images. Change the numbers, color codes and see how it looks.

img {
border: 1px outset #c8c8c8;
border-radius:5px;
box-shadow: 10px 10px 5px #717070;
}

O.K all done! Here is another try. If you wish to add border, frame or shadow particularly to one or two images then you can specify the class and call it from your style sheet. Here is how you do it.

Navigate to your wordpress posts or pages, insert image as you would normally do. Now click on edit image, go to advanced settings and specify a CSS class. You can name it anything.

In our case we have specified the CSS class as “one-frame”.

.one-frame {
    box-shadow: 0 0 20px rgba(0, 0, 0, 10);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 10);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,10);
    margin: 4px 0;
    padding: 4px;
    background: #b9b9b9;
    border: 2px solid #716a51;
}

So with the above CSS the final output is this.

If you have a little idea about CSS then you can make an image and your website look outstanding.

Hope this post helped you (especially photographers) in adding border, frame and shadow effects to your wordpress images. If you like this then please take a moment to share it. For more tips and tricks subscribe to our RSS feeds.