Q:

How to make a white square around my form fields? 

I want to make my HTML and CSS like above to display a white frame with a heading around these two form fields.  The HTML I've prepared is just the fields:
<div class="fl20 smallg">&mdash;&mdash; Fysisk person &mdash;&mdash;</div>
        <div class="clear"></div>       
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants. FIELD_FORNAMN %>"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants. FIELD_EFTERNAMN %>"></div>
        <div class="clear"></div>

Can you tell me what I should do to create the white frame with the heading "fysisk person"? 
Thank you
Update
using the fieldset tag nearly does what I want, but I need to put the heading inside the frame like above and move the whole thing to the left since it displays to far to the right after the change, and some text is white instead of black so I need to change that too:

Update
Now I'm close.  This is the mockup that shows what we want:

and here is my result this far:

I basically only need to do this with CSS instead of tables and make the button with its text to the right display lower on the page.  How can I finish it this way? 
The code now is
<fieldset class="whiteborder">
         <legend>Fysisk person</legend> 
        <div class="fl20">F&ouml;rnamn:</div>
        <input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants. FIELD_FORNAMN %>">
        <div class="fl20">Efternamn:</div>
        <input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants. FIELD_EFTERNAMN %>">
        </fieldset></td><td>
        <div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div></td></tr></table>

A:

you can use a <fieldset> element, together with a <legend> element
So:
<fielset>
    <legend>my legend</legend>
    <!--  REST OF HTML -->
</fieldset>

and just use css to style these
see @Joel Etherton for the CSS

A:

As @Bas Tuijnman said, use the fieldset.  To expand, you then apply CSS to it increase the border size and adjust the padding/margins for display layout. 
JSFiddle
Style:
body { 
    background-color: #333333; 
}

.whiteborder {
    color: #ffffff; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    margin: 10px;
}
​

Html:
<fieldset class="whiteborder">
    <legend>Fysisk Person:</legend>
    <div class="fl20">F&ouml;rnamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants. FIELD_FORNAMN %>"></div>
    <div class="clear"></div>
    <div class="fl20">Efternamn:</div>
    <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants. FIELD_EFTERNAMN %>"></div>
</fieldset>​

Edit: In order to get the button/extras to align how you want them, you should encase both blocks in separate divs that are floated left.  Then apply appropriate padding/margins to the text block to achieve the spacing you're looking for. 
<div style="float: left;">
    <!--  Fieldset html goes here -->
</div>
<div style="float: left; padding: 20px; margin: 10px;">
    <!--  text/buttons markup goes here -->
</div>

