Circle with two borders

Question

How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?

Suppose circles like this for example:

Here is a working CSS for a circle:

div.circle {    width: 90%;    height: 0;    padding-bottom: 90%;    margin: auto;    float: none;    border-radius: 50%;    border: 1px solid green;    background: pink;  }

<div class="circle"></div>

How can I add a border with two colors? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.

Answer 1

I'd suggest, with the following HTML:

<div></div> 

The CSS:

div {     width: 20em;     height: 20em;     border-radius: 50%;     background-color: red;     border: 4px solid #fff;     box-shadow: 0 0 0 5px red; } 

div {    width: 20em;    height: 20em;    border-radius: 50%;    background-color: red;    border: 4px solid #fff;    box-shadow: 0 0 0 5px red;  }

<div></div>

JS Fiddle demo.

The box-shadow gives the outermost ring of colour, the border gives the white 'inner-border'.

Alternatively, you can use a box-shadow with the inset keyword, and use the box-shadow to generate the 'inner-border' and use the border as the outermost border:

div {     width: 20em;     height: 20em;     border-radius: 50%;     background-color: red;     border: 4px solid red;     box-shadow: inset 0 0 0 5px white; } 

div {    width: 20em;    height: 20em;    border-radius: 50%;    background-color: red;    border: 4px solid red;    box-shadow: inset 0 0 0 5px white;  }

<div></div>

JS Fiddle demo.

Obviously, adjust the dimensions to your own taste and circumstances.

Using the box-shadow to generate the outermost border, however, allows for multiple borders (alternating red and white in the following example):

div {     width: 20em;     height: 20em;     margin: 20px;     border-radius: 50%;     background-color: red;     border: 4px solid #fff;     box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red; } 

div {    width: 20em;    height: 20em;    margin: 20px;    border-radius: 50%;    background-color: red;    border: 4px solid #fff;    box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;  }

<div></div>

JS Fiddle demo.

Answer 2

There are already two very good answers on this thread but here are a couple of more approaches to make this thread more complete with all possible approaches. The output produced by these are also responsive.

Using a pseudo-element:

You can use a pseudo-element that is smaller in size than the parent and position it absolutely within the parent. When the background is added to the pseudo-element and a border is added to the parent it looks like there is a gap between the border and the background. If the gap needs to be transparent then we need not add any background on the parent. If the gap needs to be of a solid color (that is, it needs to look like a second border) then a border of that color and required width should be added to the pseudo-element.

While using this approach, the inner area can also have image or a gradient as the fill (background).

.circle {    position: relative;    height: 200px;    width: 200px;    text-align: center;    line-height: 200px;    color: white;    border-radius: 50%;    border: 2px solid brown;  }  .circle:after {    position: absolute;    content: '';    top: 4px;    left: 4px;    height: calc(100% - 8px);    width: calc(100% - 8px);    border-radius: inherit;    background: brown;    z-index: -1;  }  .circle.white:after {    top: 0px;    left: 0px;    border: 4px solid white;  }  .circle.image:after {    background: url(http://lorempixel.com/200/200/abstract/4);  }    /* Just for demo */    div {    float: left;    margin-right: 10px;    transition: all 1s;  }  div:hover{    height: 250px;    width: 250px;  }  body {    background: url(http://lorempixel.com/500/500/nature/3);    background-size: cover;  }

<div class='circle'>Hello!</div>  <div class='circle white'>Hello!</div>  <div class='circle image'>Hello!</div>

---

Using Radial Gradients:

This is also a possible approach but has very low browser support and hence it is not recommended but the idea could be of use elsewhere. Essentially what is done is that a radial-gradient (circular shaped) is added to the element such that it leaves a transparent or a solid colored gap (extra border) between the solid background color and the actual border.

.circle{    height: 200px;    width: 200px;    text-align: center;    line-height: 200px;    color: white;    border-radius: 50%;    border: 2px solid brown;    background: radial-gradient(circle at center, brown 66.5%, transparent 68%);  }  .circle.white{    background: radial-gradient(circle at center, brown 66.5%, white 68%);  }    /* Just for demo */    div{    float: left;    margin-right: 10px;    transition: all 1s;  }  div:hover{    height: 250px;    width: 250px;  }  body{    background: url(http://lorempixel.com/500/500/nature/3);    background-size: cover;  }

<div class='circle'>Hello!</div>  <div class='circle white'>Hello!</div>