I've made some custom radio buttons from tow div.
Structure is 

```
<div class="outer"> // for radio outer
    <div class="inner"> // for radio inner fill
    </div>
</div>

```

Css is :

```
.outer {
    background: white;
    border-radius: 100%;
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
}
.inner {
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 100%;
}

```

It's Ok without making other changes to other elements.
Although I make adding or removing some elements which is no related by those radio button, they miss aligned.
It's not normally. Because if there are four custom radios, only one or tow or all are miss aligned.
But when zoom the web page, they are in normal.
Please explain me!
Is it caused by the browser rendering or something?

[See! It's slightly miss aligned.](https://i.stack.imgur.com/a5rJU.png)