Using ul and Li create border layout

by Kheema Pandey

HTML

<ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
     <li>Item5</li>
     <li>Item6</li>
     <li>Item7</li>
     <li>Item8</li>
     <li>Item9</li>
     <li>Item10</li>
     <li>Item11</li>
     <li>Item12</li>
    <li>Item13</li>
     <li>Item14</li>
     <li>Item15</li>
     <li>Item16</li>
  </ul>

CSS

li{list-style-type:none;}

ul{ 
 display: flex;
 flex-flow: column wrap;
 height:255px;
 width:190px;
 padding:5px;
}

li{
  border-left:1px solid red; 
  border-bottom:1px solid red;
  padding:20px;
}

li:nth-child(1), li:nth-child(2), li:nth-child(3), li:nth-child(4)
{border-left:0px solid black;
  
}

li:nth-child(4), li:nth-child(8), li:nth-child(12), li:nth-child(16)
{
border-bottom:0px solid black;
}