How to create a double outline border? - html

Question

I am writing my CSS in JS using radium and thus, I can't use pseudo classes :after and :before (which would have been made the solution very simple). How should I create the border as show in the below diagram.
Here, grey border is the same color as the main background color, which is separated by white border.
So far my CSS looks like this
upload: {
position: "absolute",
left: "0",
top: "0",
overflow: "hidden",
width: "100%",
height: "100%",
borderRadius: "50%",
backgroundColor: "#ccdde5",
cursor: "pointer"
}
which will produce the output like this

Answer 1

Try using nested box-shadows:
.circle-border-2 {
border-radius: 50%;
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccdde5;
box-shadow: 0 0 0 5px white,
0 0 0 10px #ccdde5;
}
<div class="circle-border-2"></div>
This approach even allows you to add multible borders:
.circle-unicorn {
border-radius: 50%;
width: 200px;
height: 200px;
margin: 50px;
background-color: white;
box-shadow: 0 0 0 5px #9932FF,
0 0 0 10px #B231FD,
0 0 0 15px #FF31EB,
0 0 0 20px #FF3291,
0 0 0 25px #FE3030,
0 0 0 30px #FE6031,
0 0 0 35px #FFC132,
0 0 0 40px #30FE5B,
0 0 0 45px #5230FF,
0 0 0 50px #3E25BF;
}
<div class="circle-unicorn"></div>

Answer 2

HaNdTriX's answer is a good one.
Another possible solution:
.circle-shadow-border {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: gray;
box-shadow: 0px 0px 0px 5px white inset;
border: solid 5px gray;
margin: 20px;
}
<div class="circle-shadow-border"></div>
Or use background-clip: content-box;:
.circle-border-backclip {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: gray;
margin: 20px;
border: solid 5px gray;
padding: 5px;
background-clip: content-box; /* support: IE9+ */
}
<div class="circle-border-backclip"></div>
for more information you could see https://css-tricks.com/snippets/css/multiple-borders/.

Answer 3

You can do this very easily, by simply adding an background color, padding and solid border.
I created a quick example: https://jsfiddle.net/o81rre69/
.upload {
border-radius: 50%;
padding: 5px;
height: 150px;
width: 150px;
background: #FFF;
border: 3px solid #BBB;
}
Hope it helps!