Is there a way to remove the border from each corner of a grid, similar to the attached image, without using specific classes for each column? The grid generates columns dynamically based on data. Can you provide guidance on how to achieve this?
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul{list-style:none; width:260px;}
ul li{
display:block;
width:50px;
height:50px;
border:1px solid black;
float:left;
margin-left:-1px;
margin-top:-1px;
}