dynamic form border, css - css

Question

I have a form, that may have 3 or 5 labels with input types (depending on some config elsewhere).
I have a border around this form, with fixed height and width. When the number of input types is 3, the form should be little bit smaller, and when the input types is 5, should be a little bit bigger, to accommodate the extra fields.
I would also like the text to be on the lhs, and aligned.
/* code to reset the browser - compliments to meyerweb */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 10px;
font: inherit;
vertical-align: baseline;
}
.loginform {
padding-top: 20px;
padding-left: 20px;
width: auto;
height:auto;
border: 1px solid #999;
border: inset 1px solid #333;
border-size: auto;
border-radius: 10px;
margin: 10px 300px;
margin-top: 45px;
font-family: Tahoma;
font-size: 12px;
}
.loginform ul {
margin: 0;
}
.loginform li {
display:block;
float:left;
clear: left;
width:auto;
height:15px;
padding: 10px;
}
.loginform li label{
display: inline-block;
width: 25%; /* giving the label a width, makes sure the input boxes align */
}
<section class="loginform">
<form method="POST" autocomplete="off">
<ul>
<li>
<input type="text" >One</input>
</li>
<li>
<input type="text" >Two</input>
</li>
<li>
<input type="text" >Three</input>
</li>
</ul>
</form>
</section>

Answer 1

The border does not control the size of the element so perhaps your understanding of what the border does is incorrect or you are using the work "border" when perhaps you mean "container".
A border is a decoration which sits on the outside edges of the element..it does not define the size of the element.
That being the case, I think the property you are looking for is display:inline-block:
.loginform {
padding:20px;
display: inline-block;
vertical-align: top;
background: lightblue;
border: 1px solid #999;
border-radius: 10px;
margin: 10px auto;
font-family: Tahoma;
font-size: 12px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.loginform {
padding: 20px;
display: inline-block;
vertical-align: top;
background: lightblue;
border: 1px solid #999;
border-radius: 10px;
margin: 10px auto;
font-family: Tahoma;
font-size: 12px;
}
ul {
list-style-type: none;
}
<section class="loginform">
<form method="POST" autocomplete="off">
<ul>
<li>
<input type="text">One</input>
</li>
<li>
<input type="text">Two</input>
</li>
<li>
<input type="text">Three</input>
</li>
</ul>
</form>
</section>
<section class="loginform">
<form method="POST" autocomplete="off">
<ul>
<li>
<input type="text">One</input>
</li>
<li>
<input type="text">Two</input>
</li>
<li>
<input type="text">Three</input>
</li>
<li>
<input type="text">Four</input>
</li>
<li>
<input type="text">Five</input>
</li>
</ul>
</form>
</section>