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 websites use these kinds of lines/effects.

I tried to achieve the same with borders but the color combination is not working me and it is not proper.

Do other websites use images for these ? is it easy to this ?

Any example css ?

Example sites: http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar

Answer 1

Use border-bottom and box-shadow.

body {
  background-color: #D0D9E0;
}

h1 {
  border-bottom: 1px solid #EFF2F6;
  box-shadow: inset 0 -1px 0 0 #AFBCC6;
}

Check out the Fiddle and Browser Compatibility for box-shadow property.