How can I make curved form text inputs in HTML & CSS? - html

Question

I have a project to create a website designed in PhotoShop. I want to create a to textbox in HTML and CSS which looks like this:
As you can see, there is no problem with the background or fonts; the problem is the textbox. How can I create textboxes with these curves?

Answer 1

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: #444;
direction: rtl;
width: 300px;
padding: 20px;
}
label {
width: 100%;
color: #fff
}
input {
border-radius: 0 2em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
textarea {
border-radius: 0 4em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
input[type="submit"] {
max-width: 100px;
}
<div class="wrapper">
<label>Name</label>
<input type="text" />
<label>Email</label>
<input type="text" />
<label>Message</label>
<textarea></textarea>
<input type="submit" value="Submit" />
</div>

Answer 2

This is how to get the shape in your image. You will need to learn a bit about border-radius.
The following is an example:
div#test {
border: thin solid #666;
width: 8em;
height: 2em;
border-radius: 0 2em 0 2em;
}
<div id="test"> </div>
The border-radius property is responsible for rounding corners. It can be very sophisticated, but the simple one here will do the job. You will just need to adjust some of the values.
The four values in the border-radius property represent the radius of the individual borders, clockwise from the top-left corner.