Circle with two borders

css, css-shapes

Solution

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.

Problem

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.

Original source

Related problems