Implement a modal with checkbox with dotted line box around each two checkbox in jsf/html?

I want to have a html/jsf code for below modal structue :

I only need to know how we can have dotted line boxes around two checkbox.

I need to implement above modal which I have shown.

What I did using jsf is :

                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>

I just tried with above code which is just manually by adding check boxes and labels which is not good solution.

Please help me out.