title: How can I make outside border of table different in html?
body: <p>I am trying to achieve this exact table:<a href="https://i.stack.imgur.com/y4l97.jpg" rel="nofollow noreferrer">Table wanted</a></p>
  
  <p>I have written this code in css stylesheet here: </p>
  
  <pre><code>table{
      width:90%;
      height:100%;
      margin-left:auto;
      margin-right:auto;
      background-color: white;
      color:#654321;
      border-collapse: collapse   ;
      border-style:outset;
      border-width:px;
      position: relative;
      font-size:20px;
      font-family:DTCRoughM11,arial;
  
  }
  tr,th,td{
      padding:5px;
      border-width: 5px;
      border-style:inset;
      border-collapse:separate;   
  }
  </code></pre>
  
  <p>I am getting a result like this:
  <a href="https://i.stack.imgur.com/Ayxgf.jpg" rel="nofollow noreferrer">Table i got</a></p>
  
  <p>Basically, what I wanted to do is set outside border wider than inside borders with an inset border-style.</p>
  
  <p>How Can I achieve that?</p>