nadya nadya - 2 months ago 11
CSS Question

Show separate line not border

I am not sure how to make a separate line as shown in this image.

enter image description here

This is what I am doing:

.separate-line {
background-color: #D8D9DE;
border-width: 0;
color: #D8D9DE;
height: 1px;
}


I added this html to show the border line:

<div>
<hr class="separate-line">
<input...>
</div>


The result shows a normal border. But I want to display a separate horizontal line.

Answer

If your looking to create a two coloured/seperate lined <hr>, this is a way that you can do it

If you zoom in close, you can see the difference in colours between the top half of the line and the bottom half

I've added a darker background so you can notice the difference in colour

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 2px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}
<div>
  <hr class="separate-line">
  <input type="text">
</div>

For Firefox (some reason have to double hr height):

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 4px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}
<div>
  <hr class="separate-line">
  <input type="text">
</div>