title: Is it possible to draw all CSS grid lines as dotted borders or outlines (if JS is allowed)?
body: <p>For the following CSS grid:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#my-css-grid {
    display: grid;
    grid-template-rows: repeat(6, 20px);
    grid-template-columns: repeat(6, 20px);
    background: #ffc;
    outline: 1px dotted orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="my-css-grid"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can we draw the grid line borders or outlines like below:</p>
  
  <p><a href="https://i.stack.imgur.com/vBg1t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vBg1t.png" alt="enter image description here"></a></p>
  
  <p>Google Chrome actually draws them in the debug inspect mode, while Firefox and Safari do not. Can the grid lines be drawn (1) if we cannot use JavaScript, or (2) if JavaScript can be used?</p>