Как сделать плавное увеличение border?

Question

[madnessi]

Есть border в 1px, при focus он увеличивается до 2px. Но даже при включенном transition, все равно резкий перескок с 1 на 2 пикселя. Как сделать так, чтобы было плавно?

Comments

[madnessi]

Через -webkit- тоже резкий перескок. Может, я не туда вставляю? Или для focus это все не работает?

Answer 1

[Сергей Горячев]

Например вот так https://jsfiddle.net/6y54p1az/

Answer 2

[Ivan Bogachev]

codepen

Comments

[Губернатор]

У вас крутой CSS! =) А можно узнать, что это за селектор &:after ? и мне всегда говорили что селекторы не могут быть вложенными.

[Губернатор]

И зачем вот эта ~ тильда здесь: height: ~'calc(100% + 2px)'; ?

[Ivan Bogachev]

Губернатор: это LESS - lesscss.org/features