Border is overlapping the child and sub-child of li

Question

I'm trying to develop a bordered box using ul li,

I have applied borders but the problem is when I applied border bottom and border top for li, the first 1px border-bottom is overlapping with second li border-top and it is appearing like 2px border.

My code is below,

 .main-permissions-box{ border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; border-top:1px solid #555; border-bottom:1px solid #555; } .main-permissions-box > ul> li{ border-bottom:1px solid #555; } .main-permissions-box > li:first-child{ border-top: 1px solid #555; } .main-permissions-box ul ul li{ border-left:1px solid #555; } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

Is there any way to apply border so that it wont appear like it is overlapping?

Answer 1

Apply margin-bottom to the list elements. Here is the code:

  .main-permissions-box{ border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; border-top:1px solid #555; border-bottom:1px solid #555; } .main-permissions-box > ul> li{ border-bottom:1px solid #555; margin-bottom:-1px; } .main-permissions-box > li:first-child{ border-top: 1px solid #555; } .main-permissions-box ul ul li{ border-left:1px solid #555; margin-bottom:-1px; } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

Increase the margin by the amount you wish. Hopefully this is what you need.

Answer 2

If this is what you want, I'd be inclined to use a table instead of an unordered list. However, you can get the effect you want by using outline styles instead of borders. You'll need to add an extra 1px margin to the boxes in order to get these outlines to overlap, and you need a bit more adjustment to get things lined up down the left side, but it should work:

 .main-permissions-box{ border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li{ list-style-type: none; padding:8px; margin: 1px; outline: 1px solid #555; } .main-permissions-box > ul> li{ margin-left: 0; } .main-permissions-box > li:first-child{ } .main-permissions-box ul ul li{ } .main-permissions-box > ul{ padding: 0;margin: 0; } .permission-text{ padding-left: 25px; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div> 

Answer 3

The question is already answered but answering if someone wants to solve it by border and not with outline or negative margins

This excerpt from below code helps with any kind of nesting and not only the nesting in this question

ul > li{ border-bottom: 1px solid #555; }
ul > li:last-child{ border-bottom: none; }
ul > li:first-child{ border-top: 1px solid #555; }
ul ul > li:first-child{ border-top: none; }

First three rules make sure an individual ul is bordered correctly and the last rules takes care of the nesting

 .main-permissions-box { border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; width: 380px; margin: 0 auto; margin-bottom: 20px; } .main-permissions-box li { list-style-type: none; padding: 8px; } .main-permissions-box ul ul li { border-left: 1px solid #555; } .main-permissions-box>ul { padding: 0; margin: 0; } .permission-text { padding-left: 25px; } .main-permissions-box ul>li { border-bottom: 1px solid #555; } .main-permissions-box ul>li:last-child { border-bottom: none; } .main-permissions-box ul>li:first-child { border-top: 1px solid #555; } .main-permissions-box ul ul>li:first-child { border-top: none; } 

 <div class="modal fade assign-menu-popup" role="dialog" id="assign_menu_modal"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <div class="main-permissions-box"> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Pre Sales</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClas"> <span class="permission-text">Schedule Consultation</span> </li> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option One</span> </li> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Option Two</span> </li> </ul> </ul> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Schedule Consultation</span> </li> </ul> <ul> <li class="label-check"> <input type="checkbox" class="checkBoxClass"> <span class="permission-text">Customer</span> </li> </ul> </div> <div class="clearfix"></div> </div> </div> </div>