Как нарисовать такой круг?

Question

[Александр]

Как сделать такое выделение: prntscr.com/fqthtq
HTML разметка:

<ul id="nav-btns">
                    <li class="slide-nav-btn"></li>
                    <li class="slide-nav-btn"></li>
                    <li class="slide-nav-btn"></li>
                    <li class="slide-nav-btn"></li>
                </ul>

CSS код:

#nav-btns {
    position: absolute;
    width: 100%;
    bottom: 15px;
    padding: 0;
    margin: 0;
    text-align: center;
}
.slide-nav-btn {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 8px;
    height: 8px;
    border-radius:100%;
    background: inherit;
    border: 1px solid #fff;
    margin: 3px;
}
.slide-nav-btn:hover {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 8px;
    height: 8px;
    border-radius:100%;
    background: #fff;
    border: 1px solid #fff;
    margin: 3px;
    outline: solid 1px red;
    outline-radius: 100%;
    cursor: pointer;
}

Comments

[Hyubert]

.class {
  background: #fff;
  border: 3px solid transparent;
  box-shadow: 0 0 0 3px #fff;
}

ну и стандартние свойства ширины и высоты

[Александр]

Hyubert: это не то, он получается "сплошной"

Answer 1

[Алексей Скляров]

Создаете обычный круг без заливки с бордером. Для него создаете :before и уже в нем описываете обычный белый круг.

Answer 2

[ksenofobius]

1) с помощью градиента (radial-gradient)
2) сделать залитый блок с бордер радус 50% в прозрачном блоке с таким же бордер радиусом.
Как уже сказали выше можно скомбинировать метод с :before :after