How do I create a rounded corners text box using CSS?

Question

How can I create a rounded corners text box relative to the position of the text? As of now, the box I've created is located on the top left corner of the page while the text has a specific setting with 300px padding on the left and the right. I want the box to contain the text and to be in the same position of the text.

Currently learning web development.

<p id="rcorners">
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>

#rcorners {
    border-radius: 25px;
    border: 2px solid #000;
    padding-left: 300px; 
    padding-right: 300px;
    width: 200px;
    height: 150px; 
}

Welcome to SO, please copy and paste the code you have now (HTML & CSS) so we can see what you're doing - also, if you have a chance, try to make a picture of what you're trying to do so we can have a better idea — ntgCleaner, Jan 25 '16 at 17:58
I suggest you don't use `
` element like that, only use `
` when it actually is a paragraph. When developing more complex things that could cause you troubles. You can wrap your content inside a `
` instead — pablito.aven, Jan 25 '16 at 18:06

score 0 · Answer 1 · answered Jan 25 '16 at 18:11

I think this will help to your. put your all into div

<html>
<head>
<title>Welcome !</title>

<style type="text/css">
 #txbox{
    border: 1px solid black;
    box-shadow: 1px 2px 2px black;
    width: 50%;
    height: auto;
    padding-left: 5%;
    position: absolute;
    border-radius: 25px;
  }

</style>
 <body>

 <div id="txbox">

    <h2>Education</h2>
    <ul>
    <li><b>New York University</b></li>
    <li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
    <li>GPA: 3.76</li>
    </ul>

 </div>

 </body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:15

Your syntax structure is wrong,

<p> tags are by default BLOCK level elements and should not contain other block level elements, such as <h2>.

replace your <p> with <div> which is the general purpose BLOCK level container element you want to use in the HTML syntax.

<div id="rcorners">
<h2>Education</h2>
<ul>
<li><strong>New York University</strong></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</div>

#rcorners {
    border-radius: 25px;
    border: 2px solid #000;
    padding-left: 300px; 
    padding-right: 300px;
    width: 200px;
    height: 150px; 
}

What browsers are most likely to do with your code is to add a element closing tag before the next non-child level element is encountered. Such as:

<p id="rcorners">
</p>
<h2>Education</h2>
<ul>
...
</ul>
</p> <!-- This tag is now surplus to requirements -->

Web browsers are used to dealing with lots of changing code due to (among various other reasons) issues such as the utter amateurishness of many (and especially early) website developers as well as the [formerly] often changing settings for HTML versions and other factors, so even if your site looks like it's working OK on your web browser this is no guarantee that the page HTML is actually coded correctly; it can just be coded well enough for the browser to make a best guess for what you're trying to achieve.

To help resolve these epic HTML inconsistencies it is highly advised to run pages through the W3C Markup Validator which will give you constructive feedback on your web page layout and structure.

See http://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

http://www.impressivewebs.com/difference-block-inline-css/

https://stackoverflow.com/a/8696078/3536236 <== This one is useful.

@dancemc15 I have added an extra link, please take a look it should be quite helpful for you. -- The W3C Markup Validator. — Martin, Jan 25 '16 at 18:22
To be clear, _**most**_ block level elements _are allowed_ to contain other block level elements, and usually do. `
` is an exception to that general case. A paragraph may only contain inline elements, no lists, tables, or blocks. And I second validator.w3.org — Stephen P, Jan 25 '16 at 20:59

score -1 · Answer 3 · answered Jan 25 '16 at 18:07

put a div around your

e.g.

<div id="rcorners">
<p>
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected     graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>
</div>

since you're new to web dev, don't forget to put <style> around your css

How do I create a rounded corners text box using CSS?

3 Answers3