Reduce img size when adding border

Community Forums Forums Design Tips and Tricks Reduce img size when adding border

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  gvnet 2 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #13229



    I am wondering if anyone knows how to automatically reduce the size of an image when adding a border

    e.g. when adding a border after ‘selecting’ an image, the image needs to be smaller or the border is added to the overall image size.

    I have tried

    using an outline: 4px #aaa to ad dthe border, however it chops the top of the border off (Legacy Theme)
    applying a negative margin
    reducing image height and width by the size of the border (does not respond well for ‘responsive design’

    I need the solution to be mindful of other responsive stylings for images in studiopress themes…

    There must be a way…!

    Many thanks.



    What is your site’s URL?  And which image in your site are you wanting a border around?



    @buddy boy8403 – thanks for the reply. It was a bit of a generic question but I have it sorted now.

    I apply a white border (same as background colour) to the image before it is ‘selected’ (it is a gravity forms field) and then apply a coloured border once the field (the image) has been selected.

    This keeps the image the same size before and after the change in state which keep sthe layout happy.

    Many thanks.


    Jon Bellah

    Add this to your CSS:

    img {

    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at



    Awesome @jon bellah – that’s the sort of thing I was looking for with less workarounds than my border hack…

    Many thanks.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.