SOURCE

<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>
<div class="outer-box">
    <span class="dot">
    </span>
</div>

.outer-box {
    display: inline-block;
    width: 25%;
    height: 50px;
    margin-top: 20px;
    margin-left:10px;
    border: 1px solid #000;
    position:relative;
}

.dot {
    position:absolute;
    width:10px;
    height:10px;
    background:pink;
    border-radius:50%;
}