Bowl-style underline or border on input [duplicate]

Question

I have an input field with only a border at the bottom, now I need to create a little line on the left and right of the input. It is a little hard to describe, so I will use an example:

input {
  background-color: transparent;
  height: 20px;
  padding: 10px 10px 1px;
  
  border: 0;
  border-bottom: 1px solid red;
}

<input type="text" placeholder="Example">

Fiddle

This is what I have:

This is what I need it to look like:

Answer 1

Using multiple box-shadows on the input can let you have this underlining effect:

input {
  height:20px;
  padding:0 5px;
  border: 0;  
  box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red;
  width:300px;
}

<input placeholder="Example" type="text" />

The spread radius and the X/Y offset of the sbox-shadow need to be tweaked according to the height of your input as you can see in this example with a higher input :

input {
  height:20px;
  padding:10px 5px;
  border: 0;  
  box-shadow: -18px 18px 0px -17px red, 18px 18px 0px -17px red;
  width:300px;
}

<input placeholder="Example" type="text" />

Browser support for box-shadows is IE9+.

Answer 2

You can do this with :after and :before pseudo elemnts.

.field {
  display: inline-block;
  position: relative;
}

input {
  background-color: transparent;
  padding: 3px 5px;
  border: 0;
  border-bottom: 2px solid red;
}

.field:before, .field:after {
  content: "";
  position: absolute;
  height: 7px;
  bottom: 0;
  background: red;
  width: 2px;
}

.field:before {
  left: 0;
}

.field:after {
  right: 0;
}

<div class="field">
  <input type="text" placeholder="Example">
</div>

Answer 3

A way to produce a responsive bowl shaped underline which need not be modified irrespective of the padding that is applied on the element is to use linear-gradient as background image. They can be given background-size in pixel values and be positioned at the bottom of the element.

The approach itself is fairly simple:

• We use a border-bottom of 1px thickness to produce the bottom border.
• A linear gradient which is red colored for 2px and transparent for the rest is added to the element and is positioned at the bottom of the element.
• The background-size setting determines the height of the left and right borders. In the snippet, I have set the background size as 100% 5px and so 5px will be the fixed height of the left and right borders. Their height can be increased on decreased by modifying just this parameter alone.
• The background-repeat is set so that the background image repeats in the x-axis and by setting a negative offset of 1px for the background-position, we make sure only 1px of the 1st gradient tile's red border is shown on the left. Since we have repeat-x on and the background-size is only 100%, the second tile in the x-axis will start from 1px before the end on the right itself and so this would produce the 1px border on the right side.

Note: Box shadow has the edge over this approach in terms of browser support. This is only IE10+.

input {
  background-color: transparent;
  height: 20px;
  width: 300px;
  padding:10px 5px;
  border: 0;
  border-bottom: 1px solid red;
  background-image: linear-gradient(to right, red 2px, transparent 2px);
  background-repeat: repeat-x;
  background-size: 100% 10px;
  background-position: -1px 100%;
}

input:nth-child(2) {
  padding: 0 5px;
}

input:nth-child(3) {
  padding: 10px 10px 1px;
}
input:nth-child(4) {
  height: 20px;
  padding: 10px 10px 1px;
}

<!-- prefix free library is optional and is only to avoid browser prefixing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<input type="text" placeholder="Example">
<br/>
<input type="text" placeholder="Example2">
<br/>
<input type="text" placeholder="Example3">
<br/>
<input type="text" placeholder="Example4">