Set a white container box behind two fields - html

Question

I'm a CSS/HTML novice and I haven't really found how to do this by searching. I have a simple login page where a person enters in a username and password. The page has a large background image. I want to create a rounded box that the two text fields (username and password) and the submit button goes into and sits on top of to further separate form the background image. Here is the main part of the html file, I just want to know what should I put into the container section of the CSS file to get a rounded white box .
<div class="container">
<form class="form-signin" role="form" name='f'
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' name='j_username' class="form-control" placeholder="Username"
required autofocus>
<input type='password' name='j_password' class="form-control"
placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

Answer 1

As far as a box goes, you can just create a div for that(as I see you've done: .container). To round the corners, you'll want to use the CSS property border-radius:
HTML:
<div id="example1">Hello!</div>
CSS:
#example1 {
width: 100px;
background: green;
border-radius: 15px;
margin: 0 auto;
text-align: center;
}
JSFiddle Example

Answer 2

It appears you have a bootstrap example. First, you need to use bootstrap (http://getbootstrap.com) then add a class that suits you best to container. I recommend the classes "well", "thumbnail", and "jumbotron". Visit the CSS section on the bootstrap site to see these rendered. If you don't want to use bootstrap, just copy the CSS code and apply it to your example.