Styling intersection of internal table borders using CSS

Question

Is there an idiomatic way to style the intersection of an HTML table's inner borders using CSS – or in other words, style the colour of the corners of each cell? I'd like to create a dot grid feel.

I've seen this answer for a similar problem, but was hoping for a more straightforward solution that doesn't involve pseudo-elements and shapes.

score 1 · Accepted Answer · answered Feb 25 '18 at 10:33

How about something like this to get you started, or to give you ideas. It does use a bit of trickery, but no pseudo elements or extra graphics.

body {
  background: white;
}

.grid {
  display: table;
  background: red; /* color of the dots */
  empty-cells:show;
}

.row {
  display: table-row;
}

.row>div {
  display: table-cell;
  border: 0px solid;
  width: 10px;
  height: 10px;
  font-size: 0px;
  border-radius: 2px; /* size of the dots */
  background: white;
}

<div class="grid">
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
  <div class="row">
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
    <div></div> <div></div> <div></div> <div></div>
  </div>
</div>

Styling intersection of internal table borders using CSS

1 Answers1