Reputation: 65
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
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
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
}
img {
background-color: #232323;
padding: 1px;
border: 10px solid #b2b2b2;
}
Hope I could help. :)
Upvotes: 0