Круг с двумя границами

Ответ 1

Я бы предложил со следующим HTML:

<div></div>

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>

Ответ 2

В этой теме уже есть два очень хороших ответа, но вот еще несколько подходов, чтобы сделать этот поток более полным со всеми возможными подходами. Результат, полученный ими, также чувствителен.

Использование псевдоэлемента:

Вы можете использовать псевдоэлемент, который меньше по размеру, чем родительский, и позиционировать его абсолютно внутри родителя. Когда фон добавляется к псевдоэлементу, а граница добавляется к родительскому, похоже, что существует разрыв между границей и фоном. Если разрыв должен быть прозрачным, нам не нужно добавлять никаких 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>

Ответ 3

Другим подходом было бы использовать свойство background-clip. Это не позволит вам выбрать цвет внутренней границы, но он будет отображать фон в этом промежутке:

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>

Ответ 4

Вот скрипка, где я рисую один круг с рамкой и тенью для создания эффекта внешнего круга https://jsfiddle.net/salientknight/k18fmepL/1/ Протестировано и работает в Chrome, Safari и Opera - сбой в Firefox, если текст слишком велик. Хорошо для размера шрифта размером около 3 символов. Затем высота и ширина выходят из синхронизации - будут работать в FireFox с фиксированным размером и шириной..

<!-- 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 Я не мог заставить это работать с различными размерами текста и во всех браузерах, поэтому я добавил несколько js. Я вставляю его здесь, чтобы они были одним полным решением. changesSizes - это функция, которая гарантирует, что высота и ширина всегда совпадают... сначала проверяя, что больше, а затем устанавливаем значение как для большего из двух (да, одно из этих назначений является избыточным, но это дает мне душевное спокойствие), Окончательный эффект заключается в том, что я могу добавить контент многих форм и размеров. Единственное реальное ограничение, которое я нашел, - это вкус.

   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: