Create a "inset" effect using CSS in websites
Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
EDIT:
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.
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.
Using an <hr> 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 <hr> and set the left and right border widths to 0.
hr {
border-width: 1px 0px;
border-color: #666 transparent #ccc transparent;
}