Как делать не стандартные рамки у инпутов?

Question

[Insanus]

Есть вот такой инпут я не могу понять как его возможно сделать пытлся, через border, но тогда края у него получаются острые

border-bottom-width: 2px
    border-bottom-color: $black
    border-bottom-style: solid
    box-sizing: border-box
    border-bottom-left-radius: 8px
    border-bottom-right-radius: 8px

Answer 1

[Sigma Male]

Можно использовать box-shadow:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}

Comments

[Insanus]

Не совсем не понимаю, как с помощью это можно сделать данный инпут, видь тень растягивается на полную высоту элемента, а если его уменьшать то пропадает закругление.