Multiple borders, with padding, around image - css

Question

I want to create multiple border, with some padding, around my image like shown below. I prefer to do this with CSS only, but I don't know if this is possible.
While I googled for this I only found examples like this with multiple borders directly around the object using box shadow.
I tried creating this just using a border and padding around the image. But the padding didn't even worked out and with box-shadow like in the example above I won't get something like I want.
How would you guys handle this problem, and is it even possible?
Edit:
Sorry, forget to show what I've currently have: code pen link

Answer 1

Easy peasy!
Padding, border and couple of box-shadows will do the trick.
img {
border-radius: 50%;
padding: 3px;
border: 1px solid #ddd;
box-shadow: 0 0 0 7px #fff,
0 0 0 8px #ddd;
}
Fiddle

Answer 2

When devising your markup, if possible to use a bg image instead of an inline image element this is highly recommended. A couple reasons, but the 2 main ones are:
Inline img elements cannot use the css pseudo classes, :before and
:after
Inline images are harder to mask the corners when using border
radius, especially will be trickky with multiple borders.
Also, that means this design can be created entirely using one div. Here's how I would do it:
HTML
<div class="thumbnail"></div>
CSS
.thumbnail {
height: 50px; width: 50px;
border-radius: 50px;
background: url(http://www.tapdog.co/images/welcome/satelite-bg.jpg) no-repeat;
background-size: cover;
border: solid 1px #aaa;
box-shadow: 0 0 0 4px #eee, 0 0 0 5px #aaa;
}
The key point here is that you can create as many pseudo borders as you want with box-shadow. You can still add a real border using the border property, and then can go even further and add borders using the pseudo classes, which each can take their own border and box-shadow properties.
Another notable point here is the use of the background-size property, which can be very helpful in getting the image to scale proportionally when cut by the borders. especially when dealing with user generated images, or images of variable sizes. Should add vendor prefixes for cross browser compatibility
And here's a codepen with an example. http://codepen.io/anon/pen/dKxbh

Answer 3

this might help you refer this fiddle
.round{
width:150px;
height:150px;
border-radius:50%;
border:10px solid #fff;
background-color: #eaeae7;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}

Answer 4

I think the link is exactly the right way to do this! I would use the box-shadows.
http://jsfiddle.net/chriscoyier/Vm9aM/
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
Here is another example with box-shadows from Lea Verou.
http://lea.verou.me/css3-secrets/#multiple-outlines

Answer 5

you mean something like this:
jsFiddle
HTML:
<div class="container">
<div class="inner"></div>
</div>
CSS:
.container{
width:100px;
height:100px;
padding:10px;
background:white;
border:1px solid #555;
border-radius:50%;
}
.inner{
width:100%;
height:100%;
background:tomato;
border:1px solid #555;
border-radius:50%;
margin-top:-1px;
margin-left:-1px;
}

Answer 6

<div class="border"> bipin kumar pal</div>
.border {
border: 5px solid hsl(0, 0%, 40%);
padding: 5px;
background: hsl(0, 0%, 20%);
outline: 5px solid hsl(0, 0%, 60%);
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
color:#fff;
}