Custom border on html with css (check image)

Question

Is there any possible way this "line" under Custom Fields to be done with css?

Answer 1

Jbutler483's answer is a good method of reducing markup. However, if you have to support a browser older than ie9, use this method. The other method essentially tells the browser to render this.

.inputItem {
  padding-top: 5px;
  padding-left: 5px;
  margin-top: 5px;
  position: relative;
}
.inputItem textarea {
  margin: 0;
  min-height: 50px; /*optional*/
  min-width: 200px; /*optional*/
}
.before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 100%;
  width: 30px;
  border: 2px solid gray;
  border-right: none;
}

Custom Input
<div class="inputItem">
  <div class="before"></div>
  <textarea placeholder="Enter some text! I'm resizable too!"></textarea>
</div>

Answer 2

You could use a pseudo element on this, reducing markup whilst not having to to use overflow:

.inputItem {
  padding-top: 5px;
  padding-left: 5px;
  margin-top: 5px;
  position: relative;
}
.inputItem textarea {
  margin: 0;
  min-height: 50px; /*optional*/
  min-width: 200px; /*optional*/
}
.inputItem:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 100%;
  width: 30px;
  border: 2px solid gray;
  border-right: none;
}

Custom Input
<div class="inputItem">
  <textarea placeholder="Enter some text! I'm resizable too!"></textarea>
</div>