How to Remove the Image Border in WordPress

Every WordPress theme has a unique way of displaying its images. They all vary in the amount of space dedicated by default, and what kind of caption box is used to display the title and description. Several of them make it seem as if the picture is encased in a larger box of a different color from the rest of the page containing the caption. More than one WordPress blogger has been frustrated by this design decision in an otherwise perfect theme. So while you may appreciate every other aspect of the design, you don’t like the way an additional border appears next to your images as in the screenshot below.

Fortunately, making this border invisible or removing it completely is a relatively simple task via CSS. There are a couple of ways to do it, so let’s look at how to go about dealing with an ugly border.

Changing the Background Color

If you look at the structure of the HTML surrounding an image inserted via the post editor, you will see that the <img> tag is placed within a <div> HTML element with a class called .wp-caption. Themes apply various styles to this div element such as changing its color, and inserting a margin to ensure that the rest of the text flows neatly around it without pressing up to close. Often, there will be an internal padding so that the image residing within stays away from the borders.

The end result is an image as seen in the first picture encased within a box of different color. So how do we go about rendering this box invisible so that it becomes flush with the page? While there is no facility in CSS to nullify an existing rule, we can instruct an element to inherit the properties of its parent – in this case the rest of the page. So we want to get rid of the background color of the <div> element containing the image. It’s easy to accomplish this using the following code:

.wp-caption {
background: inherit;
}

After adding these new rules to your custom CSS stylesheets, you can see that the background has completely vanished.

Keep in mind though that it hasn’t disappeared – merely the color has changed. One side effect of this is that the image description or title appears below the image without a container – sort of “floating” underneath as shown here.

This isn’t a bad thing, and it’s not at all unusual to see this design. However, if you wish to retain a separate container for the title and still require the left and right gaps of the container to vanish, we need to use a different set of CSS rules.

Removing the Side Borders

We remove the left and right spaces in a two-stage process. First, I get rid of any internal side padding of the <div> element with the .wp-caption class by using the following code:

.wp-caption {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}

This will allow the image within to expand to its full width. Keep in mind that this instruction might be superfluous if your theme doesn’t have any padding for the wp-caption class in the first place. But it doesn’t harm to have this instruction anyway.

In the second stage, we get rid of any external margins of the image within and set the width to 100% so that it expands to fill up the <div> element.

img {
margin-left: 0px;
margin-right: 0px;
width: 100%;
}

These two sets of instructions combined to eliminate any gap between the wp-caption box and the picture, thereby creating a “bleed” image as shown below:

Depending on your theme, a few additional modifications may be necessary such as removing any margin on the top of the image. But using either the first or the second set of CSS rules, you can get rid of a possibly ugly border in an otherwise perfect WordPress theme.