WordPress: How to Add Border and Shadow to Images

by

WordPress How to Add Border and Shadow to Images

As you may have noticed, the images in my articles have, starting today, a shadow border. I wanted to add a nice looking border and shadow to my WordPress images without a plugin. Plugins have their own costs in terms of performance, so I did not want to add a plugin for this simplest function. Below I will teach you an extremely simple trick to add border and shadow to your post images only. If you change the theme, you may need to follow the same steps again, but I think it’s worth it.

  • Follow the instructions below:

  1. Log into your WordPress Admin interface.
  2. Go to Appearance.
  3. Go to Customize.
  4. Go to Additional CSS.
  5. Copy and Paste one of the codes below (of your choosing).
  6. Publish.

The code below will add only the border effect to all your images:

/* Image only border posts*/
.post img {
border:1px solid #C0C0C0;
}

The code below will add only the shadow effect to all your images:

/* Image only shadow posts*/
.post img {
box-shadow: 10px 10px 3px #515151;
-moz-box-shadow: 10px 10px 3px #515151;
-webkit-box-shadow: 10px 10px 3px #515151;
-khtml-box-shadow: 10px 10px 3px #515151;
}

The code below will add both the border and the shadow effect to all your images.

/* Image shadow and border posts*/
.post img {
border:1px solid #C0C0C0;
box-shadow: 10px 10px 3px #515151;
-moz-box-shadow: 10px 10px 3px #515151;
-webkit-box-shadow: 10px 10px 3px #515151;
-khtml-box-shadow: 10px 10px 3px #515151;
}

Note: In the codes above, you can change #515151 or #C0C0C0 to your favorite color. See a complete list of hex colors.
Note: You can change the border or shadow thickness by changing the values 1px, 3px or 10px in the codes above according to your taste.

If you don’t want the images on your homepage to have a shadow or border, and only want them visible on posts, add the Additional CSS code below:

.home .post img {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
}

This post was updated on Monday / January 20th, 2020 at 11:06 PM

🧡 I Need Your Help!