title: How to get a border around body tag without it cutting off?
body: <p>I'm a beginner who wants to visualize the html and css changes that I make while learning and so I would like to put a border around all the elements that I add.</p>
  
  <p>Problem: The blue border around the html/body element cuts off and isn't fully displayed on the bottom and right sides of the border when overflow is set to hidden. <br></p>
  
  <p><strong>Why is it that the border is overflowing the html page even when its width and height are set to 100%?</strong></p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Practice Webpage &lt;/title&gt;
          &lt;link href="stylesrevised.css" rel="stylesheet" type="text/css" &gt;
      &lt;/head&gt;
  
      &lt;body&gt;&lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html,body{
      width: 100%;
      height: 100%;
      margin: 0; /* Space from this element (entire page) and others*/
      padding: 0; /*space from content and border*/
      border: solid blue;
      border-width: thin;
      overflow:hidden;
      display:block;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vpoCH.png" rel="nofollow noreferrer">Here is the resulting webpage</a></p>