Remove Border on WordPress Gallery Images

Share this:

WordPress automatically adds a border around all gallery images with inline styles on the page from the gallery shortcode. There are a number of ways to remove the borders, if you decide you want a more subtle look for your website galleries. This tutorial shows you how to remove the borders using CSS for the Twenty Twelve theme and the Genesis Sample theme.

Twenty Twelve Theme Gallery Borders

2012 default borders for gallery

In Twenty Twelve, the featured image and the images inserted into the post have a slight border-shadow around the images and a slightly rounded corner. This is the code in the stylesheet (style.css) that creates the shadow and rounded corners.

.entry-content img, 
.comment-content img, 
.widget img, 
img.header-image, 
.author-avatar img, 
img.wp-post-image {
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

In addition to the subtle shadow, the WordPress default gallery code also adds a 2px border to gallery images which may be more than you want. The WordPress gallery shortcode creates a new piece of code that is added inline on the page for every gallery you add to the post. This is the default gallery shortcode style that adds an additional 2px border to the gallery images.

#gallery-1 img {
	border: 2px solid #CFCFCF;
}

Custom CSS to Remove Gallery Borders for Twenty Twelve Theme

To give the gallery images the same subtle shadow with no extra border, as other post images, you can add this CSS to your Custom CSS editor. (How to use a Custom CSS editor.)

#content .entry-content a img,
#content .entry-content img {
	border: 0;
}

The CSS in the editor will override the inline styles. And now you have a nice subtle shadow frame around the gallery images.

2012 gallery no borders

Genesis Sample Theme Gallery Borders

In the Genesis Sample theme, the featured image and the images inserted into the posts don’t have any borders or shadows. However, the gallery images have the WordPress default 2px border.

Genesis sample theme with default WordPress gallery borders

Custom CSS to Remove Gallery Borders for Genesis Sample Theme

The default inline gallery code that adds the 2px borders is the same as for the Twenty Twelve theme above. If you would like to remove this border for the gallery images, this is the Custom CSS you would add to your editor. You will need to use the !important declaration for this theme to override the inline gallery styles.

.entry-content a img,
.entry-content img {
	border: 0 !important;
}

And this is how the gallery images look now – borders removed.

Genesis sample theme with no gallery image borders

You can remove these default gallery borders for any WordPress theme you are using, although the CSS could be a bit different for your theme. The !important declaration can help, as used in the Genesis theme.

You can also remove ALL the default gallery styles (not just the borders) by adding the following code to your child theme functions.php.

// Remove inline WordPress styles added with the gallery shortcode.
add_filter( 'use_default_gallery_style', '__return_false' );

But then you will need to add your own styles to your theme stylesheet. The details for adding your own styles will have to wait for another tutorial!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

18 responses to “Remove Border on WordPress Gallery Images”

  1. Thank you so much for posting this. I followed countless instructions, but this well executed guide was the only thing to work for me.

  2. Hello,

    Thank you for the tips! I have a question:
    Where is located the WordPress default gallery code? I can’t find it anywhere!

    • You’re welcome, Carol.
      If you view your gallery page on your website (not in the WordPress editor), and then you use your browser or Firebug in Firefox or Chrome Developer Tools to “View Source”, you will see default styles inline with the HTML. If you have a theme that uses the WordPress HTML5 gallery code, you won’t see any styles.

  3. Hi, mam. I want to remove the border from entry header, blog section and bottom section of the genesis 2.0 lifestyle pro theme.
    Looking for the positive reply

    • Thanks for stopping by, yatin. To remove the borders on those sections, you would need to find them in your style.css and change the border property to border: 0; It’s not the same section as the borders on gallery images.
      If you need more specific help, it’s best to start a thread in the StudioPress forums, and be sure to add a link to your website.

  4. Is there anyway to remove the border from just 1 image, but leave it for the others? I generally like the border, but I want to remove it for a couple specific images. Thanks!

    • Yes, you can do that.
      1. Edit your page using the text editor instead of the visual editor.
      2. Add an extra class to that image (it can be any name); I’m using no-border. add it so it looks like:
      no-border
      3. In your style.css you would style that class, like this:
      img.no-border {
      border: none;
      }

  5. I put this code in the page before the gallery code and it worked
    But when I put the code in my child theme style.css, it did not work
    I really wanted to remove the border from every Gallery
    How do I do this?
    I am using 2014 theme

  6. Hi there! To remove the WP gallery border for Genesis, where would I be copying the code you provided? Into the “text” of the gallery post or into my entire theme? Thank you!

    • Hi, Molly,

      You wouldn’t use this tutorial. For Genesis themes, removing the border depends on the theme.
      You can add this to Appearance > Customizer > Additional CSS. That should remove them for most themes.

      .gallery img {
      	border: 0;
      }
      .gallery img:focus,
      .gallery img:hover {
      	border: 0;
      }
  7. Nevermind! Thank you soooo much!

    One more thing. My images are not aligning properly on mobile. View my site on mobile to see what I mean! Do you know how to fix this?

    • Hi, Molly, You may need to clear your caches; your images look fine to me. If they are still the wrong size, you may need to use one of the “Regenerate Thumbnail” plugins to get your images to be the size the theme uses.

Leave a Reply

Your email address will not be published. Required fields are marked *