Create a “inset” effect using CSS in websites

Question

I am very much impressed by the \"inset\" like effect in many latest websites. Some examples are

and

The line in the center. Nowadays, many webs

Answer 1

Using an

---

is quite clever.

Following up on user1302036’s answer, all we need is to set the color of the top and bottom borders for an

---

and set the left and right border widths to 0.

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}