Как сделать, чтобы бордеры не накладывались один на другой?

Question

[orsodev]

Помогите исправить форму



jsfiddle

Comments

[Ankhena]

Казалось бы причем тут валидация и js...

И jsfiddle не работает в России

[Ankhena]

1. Рисовать их только в одну сторону
2. Брать цвет без прозрачности

Answer 1

[Сергей delphinpro]

Так они у вас как раз и не накладываются.
Может надо наоборот, чтобы накладывались?

Сместить нижний ряд на один пиксель вверх.
Второе поле во втором ряду сместить на один пиксель влево.
В любом не обычном состоянии (ошибка, фокус) помещать поле выше остальных (увеличивать z-index).

Всё это решается стилями, непонятно, зачем вагон тегов у вопроса.

Answer 2

[Андрей]

Один из вариантов, это использование псевдоклассов, с условием, что блоки находятся в одном родителе. Если родители разные, то можно использовать margin с отрицательным значением, как написали выше. Пример варианта с псевдоклассами:

input {
    border: solid hsl(0, 0%, 0%);
    border-width: 0 0 .1rem .1rem;
}
input:first-child {
    border-width: .1rem .1rem .1rem .1rem;
}
input:last-child {
    border-width: 0 .1rem .1rem .1rem;
}