Horizontal Rules (HR)

Simple HR

height: 1px;
border: 0 none;
border-top: 1px solid #be882e;

height: 1px;
border: 0 none; 
border-top: 1px dashed #be882e;

height: 3px;
border: 0 none; 
border-top: 3px double #be882e;

height: 6px;
border: 2px solid #be882e;

height: 8px;
border: 3px inset #78561d;

HR con gráficos

background-image: url(divider4.gif);
width: 267px;
height: 18px;
border: 0 none;
margin: 0 auto; /* centrar */

Un arco iris de HRs ...

hr.ff,
hr.gg,
hr.hh,
hr.ii,
hr.jj,
hr.kk {
margin: 0;
height: 4px;
line-height: 1px;
font-size: 1px;
border: 0 none;
}
hr.ff {
background:violet;
color: violet;
}
hr.gg {
background:red;
color: red; 
}
hr.hh {
background:orange;
color: orange;
}
hr.ii {
background:yellow;
color: yellow; 
}
hr.jj {
background:green;
color: green; 
}
hr.kk {
background:blue;
color: blue; 
}
 






IE necesita un poco de ayuda:

* html hr.ff,
* html hr.gg,
* html hr.hh,
* html hr.ii,
* html hr.jj,
* html hr.kk {
display: block;
margin-top: -14px;
}

Índice Capítulo 8
Contenido material adicional