title: How to create self-contained borders in HTML?
body: <p>I have </p>
  
  <pre><code>&lt;div id="aboutPyKov"&gt;
          &lt;h2 id="pyKovSubheading"&gt;About PyKov&lt;/h2&gt;
          &lt;p id="pyKovIs"&gt;Lorem ipsum dolor sit amet,&lt;br/&gt;consectetur 
              adipiscing elit.&lt;br/&gt;Vestibulum congue mattis odio.&lt;br/&gt;Nulla f 
              acilisi. Quisque tempus&lt;br/&gt;varius enim, quis mattis metus, 
              &lt;br/&gt;auctor quis. Lorem ipsum dolor sit&lt;br/&gt;amet, consectetur 
              adipiscing elit.&lt;br/&gt;Pellentesque a euismod sem, a&lt;br/&gt;convallis 
              turpis. Donec aliquet&lt;br/&gt;quis leo at fermentum. Maecenas&lt;br/&gt;ut
              lacinia magna. Maecenas gravida&lt;br/&gt;interdum turpis non 
              fermentum.&lt;/p&gt;                                              
  &lt;/div&gt;
  </code></pre>
  
  <p>For styling, I have </p>
  
  <pre><code>#aboutPyKov {
      border: 8px dotted rgba(255,198,107,0.93);
      border-radius: 20px;
  }
  </code></pre>
  
  <p>This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in <a href="https://i.stack.imgur.com/Xiza3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xiza3.png" alt=""></a> this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.</p>