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
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.
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.
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.
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!
18 responses to “Remove Border on WordPress Gallery Images”
This should make life easier when I post. Thanks for the tips!
I’m glad it will help, Daniel!
Thank you so much for posting this. I followed countless instructions, but this well executed guide was the only thing to work for me.
I’m glad it worked for you.
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.
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.
This was driving me crazy and was the only thing that worked. Thanks!
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:
3. In your style.css you would style that class, like this:
img.no-border {border: none;
}
Great. Thanks!
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
I see that you solved your borders.
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; }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.