html - How to create a double outline border? -

i writing css in js using radium , thus, can't use pseudo classes :after , :before (which have been made solution simple). how should create border show in below diagram.

here, grey border same color main background color, separated white border.

so far css looks this

upload: {     position: "absolute",     left: "0",     top: "0",     overflow: "hidden",     width: "100%",     height: "100%",     borderradius: "50%",     backgroundcolor: "#ccdde5",     cursor: "pointer" } 

which produce output this

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 allows 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>