Как сделать такой бордер у формы(инпутов)?

Question

[Yevhenii K]

Добрый день! Помогите сделать бордер для формы как на картинке


у меня получилось только это, никак немогу обьеденить нормально инпуты и textarea.
codepen.io/AFI/pen/rxwgKv

Comments

[Андрей Федоров]

Ну раз вы догадались снизу убрать border, то почему у "Ваше имя" справа не догадались убрать? Да и задавать размеры в px, подгоняя их к друг другу - дурной тон.

Answer 1

[John Freeman]

так??
http://codepen.io/pen/YwQoap

Answer 2

[bogdanchez]

codepen.io/anon/pen/YwQogV

Добавил box-sizing, добавил ширину для формы и для полей.

Comments

[Yevhenii K]

Спасибо, но есть один нюанс, не знаю как странить. когда ставлю фокус в инпут от на пару пикселей отталкивается от нижнего инпута (outline убрал).

[Yevhenii K]

Даже хуже, залил на сервер, а оно все сьехало
web-devgreatework.esy.es

[bogdanchez]

Вам нужно убрать бордер сверху у поля с email и добавить бордер снизу для полей с именем и фамилией.

[Yevhenii K]

Спасибо, утром понял в чем проблема.