How to make a horizontal line in relief?

Question

Many sites use a kind of <hr> in relief, ex:

For some time now I have been trying to do in hand without success. I also found nothing about it on the internet

<div>
  &nbsp;<hr>&nbsp;
</div>

div{
  width:300px;
  background-color:#eee;
  padding:10px;
}
hr{
  height:2px;
  border:1px inset #fff;
  opacity: 0.5;
}

Answer 1

It has many different ways. The hr not always reacts as expected, if you have no problems using another element, one simple way is this:

.hr {
  border-top:1px solid #ccc;
  border-bottom:1px solid #fff;
}
body {background:#eee}

1
<div class="hr"></div>
2

If supporting newer browsers only, you can use rgba(0,0,0,.2) and rgba(255,255,255,.2) to work on any background (black and white with transparency .2)

The same technique may be applied in hr, but have to be careful with the way the elements are stylized in different browsers. In some cases the hr is implemented with edges, in others as edge + content.

CSS also has the inset for the same effect, but then you have less control over the light and dark part.

See the inset applied to a hr:

hr {
  height:0;
  width:100%;
  border:1px inset #eee;
}

body {background:#eee}

1
<hr>
2