Photoshop Question posted in
The official user guide can be found here.

CSS border around pic – Photoshop

There is a border around the pics on this site www.waynesboroheritagefoundation.com but the way that the achieve this border is by placing a border around the image in photoshop, or whichever program that they use.

I was wondering if it is possible to achieve the same, or similar, effect using just css?

I think that a purely CSS solution would be much more flexible and you wouldn’t have to worry about the load time for an image (which I know is not generally a great concern now but I am old school. 🙂 )

Thanks for reading and any suggestions!
Jim

Tags:

2

Answers


  1. 0

    You probably mean this effect:

    enter image description here

    As you can see, it is in the picture itself, made with some kind of photo editor.

    You can also do it with pure CSS, by wrapping your image in a span (or some other element):

    HTML:

    <span><img src='...' /></span>

    CSS:

    span {
    padding: 5px;
    background: white;
    display: inline-block;
    -moz-box-shadow:    0 0 3px 3px #ccc;
    -webkit-box-shadow: 0 0 3px 3px #ccc;
    box-shadow:         0 0 3px 3px #ccc; 
}

    Live demo: JSFiddle.

    EDIT

    Based on King King‘s excellent comment, an even better solution is to add a white border to the image instead of wrapping it in a span.

    img {        
    display: inline-block;
    border: 5px solid white;
    -moz-box-shadow:    0 0 3px 3px #ccc;
    -webkit-box-shadow: 0 0 3px 3px #ccc;
    box-shadow:         0 0 3px 3px #ccc; 
}

    Check this demo.

    Login or Signup to reply.
  2. 0 
     padding: 5px;     // how wide the border has to be
 background: white;// border colour (in this case)
 display: inline-block;

    the white border can be given by putting above code.

    further read : http://css-tricks.com/understanding-border-image/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search