Making the center of the checkbox empty

Issue

I have the following mockup:

How can I make this round orange thing and let the center of the checkbox empty. Until now I managed to do the reversed thing:

With the following CSS:

display: block;
margin-top: -16px;
margin-left: 6px;
width: 10px;
height: 10px;
background: #337ab7;
content: "";

border-radius: 5px;

Solution

Just add box-shadow and background color white:

.dot:after {
    display: block;
    margin-top: 16px;
    margin-left: 6px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    content: "";
    border-radius: 5px;
    box-shadow: #ff6600 0 0 0 6px;
}

<div class="dot"></div>

Answered By - Amandeep Singh