How to make a horizontal embossed line?

Question

How to make a horizontal embossed line?

Navigation

#1 by (2 votes)

3

Many sites use a sort of <hr> embossed, eg:

It's been a while since I've been trying to do it on my hand without success. I also do not find anything 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;
}

html css

asked by anonymous 10.10.2016 / 22:13

1 answer

Get the brother's id of the item that made the event Error trying to open * .FDB file in IBExpert

score 2 · Accepted Answer

There are many different ways. The hr does not always react as expected, if you have no problem using another element, a 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 you only support newer browsers, 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 can be applied to hr , but you have to be careful with the way elements are stylized in different browsers. In some cases, hr is implemented with borders, in others as border + content.

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

View the inset applied to a hr :

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

body {background:#eee}

1
<hr>
2