how to give input border left and right small length

Question

I need to display the input field and i need give border bottom , left and right. But here i want only small portion border left side and right side.

Answer 1

Here is how you can give input border left and right of small length

Html

CSS

input[type="text"] {
padding: 20px;
background: linear-gradient(#000, #000), linear-gradient(#000, #000),linear-gradient(#000, #000);
background-size: 1px 20%, 100% 1px, 1px 20%;
background-position: bottom left, bottom center, bottom right;
background-repeat: no-repeat;
border: none;
color: #999;
}

Find the working fiddle

Reference