How to remove border, and shadow effect from images

  • Author
  • #1654108


    I have a quick question. I love the feel of this theme. I’m in the process of transferring everything from my last theme to this one. I have a lot of work ahead of me, but I need help with images.

    Specifically on pages and posts, when adding an image to the page/post, by default it gives the image a white background. I’ve gotten rid of the background by adding to the image style:
    background: none;

    The problem is that the theme seems to add a border to the image. I cannot get rid of this border. It almost looks like a shadow or offset behind the image.

    I simply want to upload some small transparent icons to one of my pages, and I cannot get the look I need with this border issue.

    Can anyone tell me how to take care of this problem using image styles or maybe css? I’m very new to css, by the way.


    The blog I need help with is



    This seems to be the CSS that affects the “border”:

    .image-highlight, .theme-shadow, .single-format-image .image-container img, .term-post-format-video .post img {
        outline: 1px solid rgba(255, 255, 255, 0.14);
        outline-offset: -1px;

    On image posts, it’s the ‘.theme-shadow’ class that adds the outline, so adding this will remove the outline:

    .theme-shadow {
        outline: none;

    (You might want to



    …you might want to add the other classes (.image-highlight, .single-format-image, etc) if you want to remove outlines from those, too.


    Thanks for your fast help, hfzrhmn!

    I’m very new to these kinds of things (css), so could you please explain where it is that I should add that code?

    I have the custom upgrade, and when I add that in the Custom CSS box, it doesn’t change anything.

    Also, I’m not having any issues with the “Image” format posts, I’m having issues with just the “Standard” format posts and Default page format. Hope that helps.

    Thanks again!



    Yeah, add that in Appearance -> Custom Design, and then Custom CSS. You might want to add !important also, so try adding this:

    .theme-shadow {
        outline: none !important;

    Ok great, I’m going to play around with that and see if I can get it to work.

    By the way, in the Custom CSS box, it highlights certain functions in certain colors. What does Red mean? Does this mean something is wrong?

    In the line
    outline: none !important
    the ‘none’ is highlighted in red.

    Thanks so much for the help!



    Red seems to indicate incorrect syntax, but outline:none is actually valid and it should apply correctly (see

    You can also use

    outline: 0 !important;

    instead, just to avoid the red-ness.


    Ok thanks for all your help! I’ll give this a try.


The topic ‘How to remove border, and shadow effect from images’ is closed to new replies.