Automatically Put A Border Around All Images (In The Content Area)

Some people love, love, love borders around all the content area images, some… well… don’t.

If you are not sure what I’m talking about, take a look at these two images:


Which one do you like better?

  • If you like the one with the border (left) = read on my border-loving friend
  • If you like the one with NO border (right) = bail on this post before your eyes start to bleed

So if you find yourself wrist-deep in the Border Love Club, you are going to love this simple hack… so keep on reading.


But I Can Already Add Borders Silly

Of course you can manually put 1 pixel border around all your content area images… but if you’ve got a site with hundreds of pages… that is going to take hours.

There is a better way.

Here’s how it works: you paste in some CSS and BOOM, automatically all images in the content area of all pages get border applied to them.  Magic.

Interested?


Let’s make this happen

The first step is to add some very simple CSS to your site.

If you’re using Genesis + Dynamik Website Builder (and you should be), go to Genesis > Dynamik Custom > CSS and paste this text in that big box.

.entry-content img {
          border: 1px solid #636363;
}

.removeborder {
          border: 0px !important;
}

So your screen should look like this:

Once you save that new CSS, go visit the frontend of your website and take a look at all the content area images.

BOOM.  Borders!

NOTE 1: You will NOT see the border in the admin area, you need to go to the front end to see it
NOTE 2: If you are not using G + DWB go to Appearance > Editor > style.css and add the above CSS there.


Wait, I don’t Want A Border Around THAT Image

As much as you might love borders, some image should not have borders around them.  For example:

  • Images with white backgrounds (like cut out images)
  • Oddly shaped images (like rounded corner images)
  • Divider lines

Whatever the reason is why you DON’T want a border around a particular image here is how you stop the automatic border from being applied to a particular image:

All you’ve got to do is to edit the image (by clicking on it, then clicking the pencil):

and then adding removeborder in the Image CSS Class, like this:

Now that one particular image will NOT have a border.

Repeat on as many images as you want the border removed.

You are hereby crowned a magical border wizard… go forth are border up the Internet my nerdy friend.

Your friends,
Ian & Amy

PS: No matter what your wife says… she is NOT dropping you hints when she says “a chocolate box full of bugs would be really funny to give to someone”.

Message received hunny.

* Cute dog image courtesy of ciscornify