CODEWITHSUNDEEP
htmlcssreactjs
0xburned
0xburned

Reputation: 2655

How to create a double outline border?

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.

enter image description here

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

enter image description here

Upvotes: 3

Views: 331

Answers (3)

HaNdTriX
HaNdTriX

Reputation: 29806

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>

Upvotes: 3

Ehsan88
Ehsan88

Reputation: 3791

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/.

Upvotes: 2

Huso
Huso

Reputation: 1486

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!

Upvotes: 1

Related Questions