[HTML CSS Row Cells with Nice Borders] #HTML #CSS

README.md

HTML CSS Row Cells with Nice Borders

I want a row of cells, with nice borders. this kind of works, needs a little more work

<div class="container">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <!-- Add more cells as needed -->
</div>

.container {
  display: inline-block;
  border-collapse: collapse;
  border: none;
  padding: 0;
}

.cell {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: black;
 
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: black;
  
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: black;

}

.cell:first-child {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: black;
}