CODEWITHSUNDEEP
css
Irfan Saleem
Irfan Saleem

Reputation: 65

Bordered image with padding

I'm looking to give a pre-set style to all my medias like this http://prntscr.com/7b8w3g

Currently, I managed to give gray background by giving img tag a padding of 10px + background color as grey but when I give it border, it forms on the outter padding area whereas I want the thin border stick to picture like in above screenshot. That above picture is done via inline + div but I want to get it pre-set so all my pictures have it by default and all my pictures currently on my site have it. Any idea how to? URL (http://www.freedomgolf.com.au/)

Thanks!!

Upvotes: 0

Views: 73

Answers (2)

lmgonzalves
lmgonzalves

Reputation: 6588

This can be done with (CSS):

img{
    border: 1px solid #999;
    box-shadow: 0 0 0 10px #E5E4E2;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/on27squo/2/

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Upvotes: 1

meduz'
meduz'

Reputation: 618

To your specific problem, here's the idea to reproduce the thin dark border surrounded by a greater & lighter one:

img {
  background-color: #232323; // set the color of the dark thin border
  padding: 1px; // padding width make your thin dark border
  border: 10px solid #b2b2b2; // border make the grey area surrounding the thin border
}

Run it without the comment :

img {
  background-color: #232323;
  padding: 1px;
  border: 10px solid #b2b2b2;
}

Hope I could help. :)

Upvotes: 0

Related Questions