Photoshop Question posted in
The official user guide can be found here.

How can I make curved form text inputs in HTML & CSS? – Photoshop

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:

Image that I want to convert

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?

Tags:

2

Answers


  1. 0

    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">&nbsp;</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.

    Login or Signup to reply.
  2. 0 
    * {
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search