I want to style my table as shown in picture - html

Question

I would like my table to look like the one in image with CSS. Is there a way to do it because I tried by my side as much as I could but did not work. I would appreciate your help.
Here is my HTML code
<div id="login_fields">
<form id="login_form">
<table>
<tr>
<td>User</td>
<td><input type="text" name="user" id="user" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
</table>
</form>
</div>

Answer 1

May I suggest amending your HTML (the table is entirely unnecessary), to the following:
<form action="#" method="post">
<!-- using a label means that clicking the text automatically focuses
the relevant input, the value of the 'for' attribute must match the 'id'
of the relevant input though -->
<label for="uName">User</label>
<input id="uName" />
<label for="pass">Password</label>
<input type="password" id="pass" />
</form>
With the following CSS (amend colours and dimensions according to taste):
form {
/* aesthetics, just to move the label/input pairs from the edge of the screen */
padding: 1em;
}
label,
input {
float: left; /* to allow for width to be given, and for clearing */
border: 1px solid #999; /* amend the following as required */
line-height: 1.2em;
padding: 0.2em 0;
font-size: 1em;
height: 1.4em;
margin-bottom: 0.8em;
}
input + label {
clear: left; /* this styles a label element that immediately
follows an input, and forces a new-line */
}
label {
text-indent: 0.5em; /* moves the text away from the curved corners */
width: 30%;
border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}
input {
width: 60%;
border-radius: 0 0.5em 0.5em 0;
outline: none;
}
input:focus,
input:active {
box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
default outline, and gives visual
feedback to show the input is focused/active */
}
JS Fiddle demo.

Answer 2

I'd start replacing the TD's for User and Password with TH's, since they're table headers. Then I'd produce two images, one with the curve in the left and one with the curve in the right, then I'd apply then in the background. The CSS would look like that:
table tr th { background: url(bg-left.png) no-repeat; width: 100px; height: 40px; }
table tr td { background: url(bg-right.png) no-repeat; width: 250px; height: 40px; }
I've removed the font styling to keep it easy to read.