Here at WP SuperGeek, we often get asked how to make simple design edits to a WordPress website. An example of these questions is: “How can I remove the borders that appear around all the images on my site?”

While some themes allow users to change fonts, colours, layout, and other stylistic elements directly from the options panel, not all themes allow this. And some design changes aren’t able to be changed from these option panels, anyway.

Not all themes will have image borders by default. But if you find yourself loving everything about a theme, save for one niggling aspect, the good news is that it IS fixable!

So how can you remove borders from images on your WordPress website? Read on to find out!

The stylesheet

If you don’t have a setting for image borders in a WordPress options panel, the only other way to change it is to go into your theme’s style.css file. Also called a stylesheet, this file dictates the design of everything on your site. Fonts, colours, margins, padding, and a whole lot of other design elements are controlled by this file.

Making changes to this file is doable, if you are interested in getting your hands dirty a bit. But it can be a bit scary, especially if you haven’t worked much with code! So here are the steps to make changes to your stylesheet, with the caveat that if it gets too complicated for you, don’t worry! This isn’t for everyone.

But if you’re game, then read on…

How to remove borders from an image in the stylesheet, step by step

1. Use either Safari, Chrome, or Firefox as your browser (if using Firefox, download the Firebug extension). Next, follow the step below (2, 3, or 4) for your browser, then skip to step 5.
2. For Safari, go to Safari>Preferences>Advanced then check the “Show Develop menu in menu bar” checkbox:
3. For Firefox, download and install the Firebug plugin.
4. For Chrome, You don’t need to activate anything. 🙂
5. Right-click on the image that has the border, and choose “Inspect Element” from the menu.
6. A new pane will open at the bottom of the browser window, showing the page’s HTML code (on the left-hand side) and relevant CSS code (on the right-hand side). In the HTML code part, you should see the relevant image tag for your image. It will look something like this:
7. Click on the image tag in the HTML section, then look over to the CSS section. You can make changes to the CSS code in this section to preview what it will look like on your site.
8. Find the bit of CSS that has the image border. It will look something like this (in this example, I have unchecked the box next to the border style, which temporarily turns the border off:
9. Click on the code and change it to border: none.:
10. If that successfully removed the border, you are ready to apply this change to your stylesheet!
11. In a new tab, open the back-end of your WordPress website.
12. Navigate to Appearance>Editor.
13. This should open on your stylesheet. Verify this by checking at the top:
    
14. Find the bit of CSS code that deals with your images. You can do this quickly by hitting command-F (or control-F for Windows) and pasting in the CSS selector for the image.
15. Once you have found the code, it should look the same as the chunk of code that Inspect Element showed you. You can then make the same changes here that you made in the Inspect Element window, and save your changes.
16. Go back to the front of the website and refresh, making sure that your cache is emptied. Your images should now appear without borders!

Phew! Did this help?

For more on using Inspect Element, see my article on Grassroots Internet Strategy.