Knowledge.ToString()

Add Border and Shadow to WordPress Post Images Without Plugin

WordPress image border and shadow

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.

Note: Depending on your theme, the featured image may or may not be affected by this css. If the featured image is affected and you don’t want the border and shadow, there is not a standard way to exclude the featured image. As the theme designers have coded featured image in different ways, you need to have a css programming skills in order to exclude featured image for your theme.

Share

Comments

7 responses to “Add Border and Shadow to WordPress Post Images Without Plugin”

  1. Andrew Avatar
    Andrew

    Hello Vishal,

    Thank you so much, your post really helped save me time and it is always a problem to find the class selector; sometimes it is “wood for trees” as it is said.. 🙂

  2. kotian Avatar
    kotian

    Thank you so much, it really helped me

  3. Rajib Avatar
    Rajib

    Wow, This is what I was looking for to add shadows to my blog images. Very impressive and short tips. Thanks.

  4. Kedarsan Avatar
    Kedarsan

    Nice thought, i am also add my site and its work for genesis theme . thanks for a grest tips

  5. kiran K. Avatar
    kiran K.

    how to add border to each posts? can you please help me out here.

    1. Vishal Monpara Avatar
      Vishal Monpara

      Hello Kiran,

      You need to look at the theme or WordPress theme documentation to find the exact css class name used for the post and add a border property to that css class definition. Definition can be stored at the place mentioned in this blog post.

      Regards
      Vishal Monpara

  6. Navin Rao Avatar
    Navin Rao

    Hi Vishal,
    Amazing short and sweet post. I was just able to add awesome drop shadows in almost no time with provided code.

    Though, have a small query, is there any way How to avoid the shadows for the feature image?

Leave a Reply

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