Blogger: How to Eliminate Image Borders Altogether using CSS

By default, Blogger places a border and shadow around images. If you don't want these, you have two options.

You can eliminate them altogether by adding CSS code. The ability to add CSS code was an option in all themes when we looked in September, 2020.

Or you can make image borders transparent—an option in two popular themes, Simple and Awesome, and instructions are here: How to Remove an Image Border (or Choose a Color) in New Blogger!

This article provides some popular CSS code that removes image borders and also preserves transparency in PNG images. Be sure and see the "before" and "after" images below.

Get Read to Customize the Theme

Go to Blogger and select the appropriate blog. On the dashboard's left sidebar, click Theme. Then, in the window on the right side, click the Customize button (NOT the arrow by it).

Find Add CSS Option on the Advanced Menu

Now you'll see various options on the left sidebar. Go to the bottom of the sidebar and click the down arrow next to Advanced.

What you see next are the customizing options for "Page Text" - which just happens to be the first item in a scrollable menu showing many items for which you can customize color or font. Click the arrow to the right of Page Text. Then scroll to the bottom and click Add CSS as shown in the image below.

Add the CSS Code

Aftr you click Add CSS, place your cursor (click) in the line below that displays and says Add custom CSS.

Now copy the code below and paste it into this text box.

img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

Your left sidebar should now look like the image below. You can use the scroll bar to see the first part of the CSS you just entered.

Save Your Changes

Be sure to save your changes by clicking the SAVE icon located in the bottom right corner of the window as shown in the image below.

Note: the next time you click Advanced, the "Add CSS" option will display by default. Blogger will display the options for the last item in the list that you customized.

Before and After Images

We thought you'd enjoy seeing the effect of this code in a real blog using the Watermark theme. The top image is a JPG. The bottom image is a PNG with the area around the smiley face transparent.

Before adding the CSS code:

After adding the CSS code:

Summary

CSS stands for Cascading Style Sheets. CSS code tells the browser how to style a web page. The code above is not hard for webmasters, but we're lazy and copied it from one of our favorite websites, stackoverflow.com.

Disclaimer: As always, we do our best to provide accurate, easy-to-understand information for our blog visitors. However, we will not be held responsible for inadvertent errors, nor should any visitor infer that we are providing technical advice or guarantees. No two themes are alike, so not all solutions will work with all themes. In addition, we do not have the resources to respond to technical questions or provide individual technical assistance. More information can be found in our terms and policies webpage.

How to Remove the Image Border or Choose a Color in New Blogger!

As you know, Google started to automatically add borders and shadows to our images and image captions a while back. To get rid of these borders, here are your two options as tested themes in September, 2020:

♦ Option #1: Customize the theme to make image borders transparent (or another color). Two themes support this: Simple and Awesome.

♦ Option #2: Add CSS code to eliminate image borders altogether. We explain how to do this in a separate article How to Eliminate Image Borders in Blogger via CSS.

This article explains how to use option #1. OK, let's go.

Removing Image Borders in Classic Blogger

If you are using the Simple or Awesome theme in New Blogger and would like to remove the image borders by making them transparent (or a different color), please see our step-by-step instructions at How to Remove the Image Border or Choose a Color in New Blogger (themes last checked September, 2020).

But don't despair. If you aren't using either of these themes and want to rid yourself of image borders, you do have an option: add CSS code. We provide detailed instructons at How to Eliminate Image Borders Altogether using CSS.

---

This blog post was for Classic Blogger, and also only applicable for those using the Simple or Awesome theme. We keep it around for archive purposes and to redirect visitors to the appropriate posts..

Step One

Go to the Blogger dashboard and click Theme on the left sidebar. Then click the Customize button. You should find the customize button in your blog according to one of the two screenshots shown below.

The Blogger Theme Designer window displays as shown below. If you see something else, you're probably using New Blogger and need to visit our new post How to Remove the Image Border or Choose a Color in New Blogger!.

Step Two

On the Blogger Theme Designer window, click Advanced at the bottom of the left sidebar. A row of items will display on the right side of the small window. Then scroll down to the bottom of the list on the right side and click Images as shown below.

Step Three

The options for images are Background Color, Border Color, and Caption Text Color. Look at Border Color. We can't remove the border, but we can either make it transparent so the background color of the blog post will peek through, or select a color. If your background is white, you could just select white for your image borders.

As shown above, make the borders transparent by clicking the down arrow on the top row, then, in the small window that pops up, click Transparent at the bottom of the window.

Step Four

Now click Apply to Blog. Sometimes that option is not highlighted until I click around on some other tabs, but when it finally highlights, make sure you click Apply to Blog or your settings will be lost.

Thanks for stopping by. Cheers!