How to create self-contained borders in HTML?

user_12626177 0
Viewed 81

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.

css html
3 Answers

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.

user_6063710

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

p, h2 {
padding: 0px;
}

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

user_106521940

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
}
user_99459690
Related