Sometimes you can just drop an image right in to your site.
For example, if your image’s background and the site’s background are the same (or even better, the image’s background is transparent) then you’re probably just good-to-go, like this:
However when you have an image with a different background color,
Or especially a changing border background color that’s inconsistent around the four sides,
A proper border can help create a smooth transition between your image and the rest of the page. It’ll make your post look a lot better without much work at all.
Quick & Easy CSS Borders in WordPress
Just follow these four simple steps from your WordPress dashboard.
1. Navigate to “Appearance” > “Edit CSS”
2. Add the Following Custom CSS
Add this CSS to your CSS Stylesheet Editor:
img.my-border {
-webkit-box-shadow: 0 2px 4px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0 2px 4px 1px rgba(0,0,0,0.5);
box-shadow: 0 2px 4px 1px rgba(0,0,0,0.5);
border-radius: 3px 3px 3px 3px;
}
Of course you can modify these values, but I find that they’re effective without being over-the-top distracting from the image.
3. Click “Save Stylesheet”
4. Add Your New Custom CSS Class
Now when you’re writing your post follow these simple steps.
- Insert your image
- Select your image to bring up the bar of editing icons
- Click the pencil icon from the visual editor
- Type “my-border” in the Image CSS Class field
That’s it!