• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles, Images & Galleries

Remove Border on WordPress Gallery Images

December 3, 2013 Updated on December 13, 2018 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

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!

Share this post:

TwitterFacebookPinterestLinkedInEmail

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Daniel Sanchez says

    This should make life easier when I post. Thanks for the tips!

    Reply
    • Marcy Diaz says

      I’m glad it will help, Daniel!

      Reply
  2. Algernon Blackwood says

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

    Reply
    • Marcy Diaz says

      I’m glad it worked for you.

      Reply
  3. Carol says

    Hello,

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

    Reply
    • Marcy Diaz says

      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.

      Reply
  4. yatin says

    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

    Reply
    • Marcy Diaz says

      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.

      Reply
  5. Martin says

    This was driving me crazy and was the only thing that worked. Thanks!

    Reply
  6. Ken Ashe says

    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!

    Reply
    • Marcy Diaz says

      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;
      }

      Reply
      • Ken Ashe says

        Great. Thanks!

        Reply
  7. Andrew Leonard says

    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

    Reply
    • Marcy Diaz says

      I see that you solved your borders.

      Reply
  8. Molly says

    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!

    Reply
    • Marcy Diaz says

      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;
      }
      Reply
  9. molly says

    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?

    Reply
    • Marcy Diaz says

      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.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!