Position box with rounded corners?

I have found the following for a box with round corners. I can get it to work just fine. However, I can’t figure out how to specify an exact location on my page for the box to appear. I thought I would add
top: 85px;
left: 300px;
to it but I can’t figure out where to add it to make it place the box where I want it. Will someone assist me with this?
Thank you.

Here is the CSS:

/* */
* html #tlc, * html #trc {height: 1%;}
/* */

body
{
margin: 0;
padding: 0;
background-color: white;
font-size: 100.01%;
text-align: center;
}

#box
{
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
padding: 0;
text-align: left;
width:80%; /* <– use this to tie width to viewport size */
width: 40em; /* <– use this for a set width */
background-color: #eeeeee;
}

#content
{
padding:3em;
}

#content h1
{
color:#0354c2;
font-weight: bold;
font-size: 1.2em;
font-family: helvetica, geneva, arial, sans-serif;
}

#content p
{
color:#3b3b3b;
font-size: 1em;
line-height: 1.3em;
font-family: arial, helvetica, sans-serif;
}

/* —=== border code follows ===— */
/*
tlc = top left corner
trc = top right corner
blc = bottom left corner
brc = bottom right corner
lb = left border
rb = right border
tb = top border
bb = bottom border
*/

#tlc, #trc, #blc, #brc
{
background-color: transparent;
background-repeat: no-repeat;
}

#tlc
{
background-image:url(images/tlc.gif);
background-position: 0% 0%;
}

#trc
{
background-image:url(images/trc.gif);
background-position: 100% 0%;
}

#blc
{
background-image:url(images/blc.gif);
background-position: 0% 100%;
}

#brc
{
background-image:url(images/brc.gif);
background-position: 100% 100%;
}

#tb, #bb
{
background-color: transparent;
background-repeat: repeat-x;
}

#tb
{
background-image:url(images/tb.gif);
background-position: 0% 0%;
}

#bb
{
background-image:url(images/bb.gif);
background-position: 50% 100%;
}

#rb
{
background-image:url(images/r.gif);
background-position: 100% 0%;
background-repeat: repeat-y;
}

#lb
{
background-color: #eeeeee;
background-image:url(images/l.gif);
background-position: 0% 100%;
background-repeat: repeat-y;
}

Here is the HTML:

<div id=”box”>

<!— box border –>
<div id=”lb”>
<div id=”rb”>
<div id=”bb”><div id=”blc”><div id=”brc”>
<div id=”tb”><div id=”tlc”><div id=”trc”>
<!– –>

<div id=”content”>
<h1>Simple Box by tedd</h1>

<p>
View the source code via your browser.
</p>

</div>

<!— end of box border –>
</div></div></div></div>
</div></div></div></div>
<!– –>

</div>

Also in #CSS _↴