borders around photos

  • Author
  • #1262755

    On the home page in the right column, there is an image that has a border around 3 sides of it….I need it either to have borders on all 4 sides, or no borders at all?

    The blog I need help with is



    You can delete the image and use a free online editing program to create the borders you want and then upload the image.


    can I just to it in photoshop? I suppose so.


    OK-now it has my border as well as the 3 borders it had before, but it still looks a lot better. I am a print designer, and I’m really not used to making things look exactly like I want them down to the tiniest little dot. Web stuff is so different!



    Yes, you can use photoshop. But there are other easy to use free image editing sites online.
    I do all image preparation and sizing offline first and only upload after I have a high quality, optimized image of the exact size that I want.


    Hi there,

    You’ve got this code in your theme:

    #masthead img, #featured-content img, #recent-content img, .entry-content img, .entry-thumb img, .comment-content img, .widget img {
    background: #fff;
    border: 1px solid #bbb;
    max-width: 99.35%;
    padding: 1px;

    The border: 1px solid #bbb is what’s adding a gray border. The 1px of padding is what is making the white space show between the border, if you’re curious.

    You can edit this and what it applies to if you have custom css editing. You could make it so if you added a class to images they would have the border and no border without the class, like this in your post under ‘text’ view:

    <img src="" class="border">

    Then you’d put the custom css in your style sheet. This might be a bit intense for you at the moment, but if you’re a print designer I bet you’ll find a lot to love in CSS. There’s some more information here:

    Now, in terms of your original error, there ARE ways to set it so a border is only on certain sides (like with the css border-right: 1px solid black) but chances are what is causing your issue is that the image is actually too big for the space or getting cut off in some other way, so while the fourth border is there in the code, you’re just not seeing it (kind of like it was under another piece of white paper, if you’re thinking print.)

    I don’t see the error right now on your site, but if you point me to it I can confirm if this is what’s happening.

    As far as adding borders in photoshop, I wouldn’t recommend it – I could go into the positives and negatives in detail, but for now I’ll just say that getting custom css set up and then learning it as you go will end up saving you a LOT of time – and will allow you to give your site visitors the best experience across browsers and platforms.

    Let me know if you’ve got specific questions and I’ll help you out or point you to some good resources.


    (sorry, ignore those
    gs in that first code block, not sure how I ended up with those there. the css should look like this:

    #masthead img, #featured-content img, #recent-content img, .entry-content img, .entry-thumb img, .comment-content img, .widget img {
    background: #fff;
    border: 1px solid #bbb;
    max-width: 99.35%;
    padding: 1px;

    the first part (before the “{“) refers to the things the styling will apply to and the information inside the brackets is the styling that is being applied. If you’re using the chrome browser, you can view this information by right clicking on something and selecting “Inspect Element” at the bottom of the menu.


    Hm, I did it again. Sorry about those BRs there, just pretend they’re normal looking line breaks.


    Wow-thanks for all the info! Although a lot if it is incomprehensible to me :). I desperately need to learn CSS. I’ve pretty much got a handle on basic html, but css always seems so complicated to me. But I do need to learn it….these days you can’t just be a print designer-you just HAVE to do web stuff too. And it’s nice to hear that you think I’ll like it when I finally master it a bit more. Where is a good place to start? I’m finding learning as I go isn’t working too well, because if I don’t understand the code someone gives me, I’m just plunking it in there, then I won’t remember it and how to do it in the future. I’d love to get more help from you, but I’m logged in as my client now….can we converse by email? Not sure of the etiquette here….


    Sorry if I overwhelmed ;)

    Believe it or not, I’ve been doing freelance work on the net in some form for something like a decade now and I’ve never taken a class either (not for tech stuff, anyway). There are a lot of wonderful resources out there and learning by trial and error and fiddling with existing code is one of the very best ways to do it.

    As a first step, I’d definitely suggest learning to use the developer tools that are included in chrome (or with the firefox firebug extension). One of the coolest things about the net is that the nature of web browsers requires the bulk of code to actually be public – you can view the source on all your favorite websites!

    Developer tools go a step further by organizing and color coding that information for you, so you don’t just have one giant wall of text.

    There are a lot of tutorials out there for this, and a good one is at HTML5rocks:

    You can learn a lot, though, just by clicking anything you see and ‘inspecting’ it – you’ll see what kind of tag it is in the html in the left pane and then see what css is being applied in the right pane.

    Honestly, I don’t have one particular overall resource to point you to, in terms of a step by step tutorial, for a couple reasons. One is that everyone has different goals with web work, and you can jump in at any number of places. The second is that my favorite resources is just google – if you perfect your google skills you can do just about anything.

    Searching for “How do I make a border in css” or “font size in css” or “how do I make a triangle with drop shadow using css only” will give you a fair amount of relevant results.

    You will find yourself landing at one place a lot, though, if you’re just searching for CSS terms to be defined, and thats They’ve built a great database – though I never end up searching in the site, I always type something in google and then click the link to get to their site, haha. Google is just an easier way to search it. is another great place to start.

    Finally, you can feel free to email me – there’s a link to my site at the name – but I do like talking about this stuff publicly so other people searching for similar information might be able to find it. Your concern about your client name is a good one though – maybe they don’t want people googling them to find this thread – but if you create your own name just for the forums (and maybe a blog to go along with it to test your new CSS skills) I’m sure you’ll enjoy participating here a lot!


    OK-I’m back under my own name :)
    And I do like to participate publicly, but I sort of feel like now we’re way way off the original subject of borders around photos!
    And don’t look at any blogs under this name….they’re a huge mess, and, as you said, I basically use them to test things….
    Is this forum also for stuff? I have a couple things going on over there too…



    hello again,
    No we do not provide support for any WordPress.ORG issues here at The two are completely separate. If you don’t have a username account at WordPress.ORG click and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.



    Volunteers at WordPress.COM do not provide support by email. We do not become Admins of anyone’s blogs either.


    No, there are separate forums under there, and it’s kind of enforced since those forums tend to get pretty in depth into things not possible to do on and it’s important not to confuse the two. Perhaps posting over there will be more in line with your learning.

    You’re right, though – why don’t you get back to me here if you need more help with the borders on your site?

    In the meantime check out those tutorials. If you’ve got questions that are about CSS and not really tied to WordPress, I’ve heard that this site can be useful:



    Please remove the site linked your WordPress.COM username and link it only to a free hosted WordPress.COM blog. Then no one will leap to the conclusion that you are are trawling these forums looking for work, which is not, of course, allowed here.


    Thanks for the note – I was unaware of any official policy on volunteers allowing help questions being taken off site if off topic, but I entirely see the logic behind it. It would be a lot of load and makes a lot of sense to have these discussions in a way that benefits people browsing the forum for answers to their own questions.

    Back to the original topic, you noted “I do all image preparation and sizing offline first and only upload after I have a high quality, optimized image of the exact size that I want.” up there and I feel I should mention that this isn’t as important as it one was – sites are now displayed on lot of different sized screens and have to use the same files to display. So there is a lot of image re-sizing done in modern themes that doesn’t require ‘exact’ sized images.

    It’s usually fine to just upload a fairly large image and let your theme make thumbnails and handle responsive re-sizing for different browser windows or mobile.


    It’s currently linked to my primary WordPress blog – which is, as you are close to mentioning, built on the .org open source build – but I wasn’t aware that having that link was against any policy. I have not intended to give any implication that I’m available to for hire from WordPress forum users. I am not.


    Quick general question….the owner wants her blog moved to .org so her address doesn’t have “wordpress” in it. She wants more control over the look of her site. It appears that I have 2 options at .com….I can purchase the design upgrade (which I think allows control over the CSS), or the font upgrade. But my question is, since we’re moving to .org, at that point we get control over the css anyway, so there is no reason to purchase the other upgrades? Trying to figure out what needs to be done here.


    You actually don’t need to use a .org install in order to have your own domain. Just purchasing the domain.

    This page has more information about domain mapping:

    Moving to .org would give you the ability to use a domain, but you also need to set up your own hosting, install the opensource WordPress yourself with your own mySQL database, and so on. If you decide you are up to figuring out these things on your own, you can find resources at the before you make your decision.

    Until you’ve done that, yes, you don’t need to purchase upgrades, but you may decide that it’s going to be easier for you to get the domain upgrade through the .com version of WordPress (along with the support and ease that comes with it.)


    Thanks for the reply! So, to make sure I understand it correctly, it seems like purchasing a domain (but not hosting) will enable us to stay at .com instead of going to .org, but we won’t have to have the word “wordpress” in our address? And then purchasing the upgrades available at .com might conceivably be easier and less complicated to customize the site than diving into the css that would be necessary over at .org? I know there are many sites with explanations about the .com vs ,org, but I still can’t seem to ferret out the pertinent details. I have to consider that the client wants to maintain her own site after we’ve set most of it up, so staying at .com might be easier for her?

The topic ‘borders around photos’ is closed to new replies.