Add border and shadow to WordPress post images without plugin

By | November 21, 2017

I wanted to add a nice looking border and shadow to my WordPress images added within the post but did not want to add a plugin. Plugin has its own cost in terms of performance so I did not want to add a plugin for the sake of adding border and shadow to the images. Here is an extremely simple trick to add border and shadow only to your post images. If you change the theme, you may need to follow the same steps again but I think it is worth.

Login to your WordPress blog and go to Appearance > Customize.

Wordpress Appearance Customize

Look for “Additional CSS” option and click on it

WordPress Additional CSS Option

Add the following code in the box as shown in the image and click on “Save and Publish”.

/*change border color #C0C0C0 and shadow color #ccc to any color of your choice */
.post img {
border:1px solid #C0C0C0;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}

wordpress image border shadow css

You are done.

Vishal Monpara is a full stack Solution Developer/Architect with 12 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user leveraging geographically dispersed team members.

Leave a Reply

Your email address will not be published. Required fields are marked *