How to create self-contained borders in HTML?

Question

I have

<div id="aboutPyKov">
        <h2 id="pyKovSubheading">About PyKov</h2>
        <p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur 
            adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f 
            acilisi. Quisque tempus<br/>varius enim, quis mattis metus, 
            <br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur 
            adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis 
            turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
            lacinia magna. Maecenas gravida<br/>interdum turpis non 
            fermentum.</p>                                              
</div>

For styling, I have

#aboutPyKov {
    border: 8px dotted rgba(255,198,107,0.93);
    border-radius: 20px;
}

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 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.

Answer 1

This is CSS level 1 : block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width . Either set the border to the paragraph element or set a width to your div .

Answer 2

Try adding padding = 0px" to your <p> tag and <h2> tag,

p, h2 {
padding: 0px;
}

because <p> and <h2> tags have default padding applied.

Answer 3

Just change the display attribute

#aboutPyKov {
    border: 8px dotted rgba(255,198,107,0.93);
    border-radius: 20px;
    display:inline-block; // just change the display
}