Circle with two borders

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.

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

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

Solution 3:

Another approach would be to use the background-clip property. It wont allow you to choose the color of the innner border but it will show the background in that gap :

div {
  width: 150px;
  height: 150px;
  padding:2px;
  border-radius: 50%;
  background: #DD4814;
  border: 2px solid #DD4814;
  background-clip: content-box;
  margin:0 auto;
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}

<div></div>

Note that you control the gap size with the padding value.

Solution 4:

Here is a fiddle where I draw one circle with a border and box-shadow to create the outer circle effect https://jsfiddle.net/salientknight/k18fmepL/1/ Tested and works in Chrome, Safari and Opera -- Fails in Firefox if text gets too large Good for about 3 characters font size 1em then height and width get out of sync -- will work in FireFox with a fixed size height and width...

<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>


p.circleBlue{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #159fda;
 border: 5px Solid #fff;
  color: #fff;
  min-width: 1em;
  border-radius: 50%;
  vertical-align: middle;
  padding:20px;
   box-shadow: 0px -0px  0px 3px #159fda;
   -webkit-box-shadow: 0px -0px  0px 3px  #159fda;
 -moz-box-shadow: 0px -0px  0px 3px #159fda;
   margin:5px;
}

p.circle:before{
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

update I could not get this to work with a variety of text sizes and in all browsers so I added some js. I'm pasting it here so their is one complete solution all together. changesSizes is a function that makes sure that height and width always match... first checking which is bigger and then setting the value of both to the larger of the two (yes one of these assignments is redundant but it gives me peace of mind). The final effect is that I can add content of many shapes and sizes. The only real limitation I have found is taste.

   changeSizes(".circleBlue");
   //changeSizes(".circleGreen");
   //changeSizes(".circleOrange");

---------        

function changeSizes(cirlceColor){
    var circle = $(cirlceColor);
 circle.each(function(){
   var cw = $(this).width();
   var ch = $(this).height();

   if(cw>ch){
       $(this).width(cw);
       $(this).height(cw);  
   }else{
        $(this).width(ch);
       $(this).height(ch); 
   }
   });
}

Example: