Styling hr element with CSS


hr element is easy way to make line on your page, but the default style hr element looking not good, if you ever put hr element to your page and you will to make it looking better, here the sample for styling your hr element with CSS.

1. Line

Example:


hr {
border-width: 0;
border-top:1px solid #000;
height:0px;
}


2. Dotted line

Example:


hr {
border-width: 0;
border-top:1px dotted #000;
height:0px;
}


3. Dashed line

Example:


hr {
border-width: 0;
border-top:1px dashed #000;
height:0px;
}


4. Box shadow

Example:


hr {
border-width: 0;
border:1px solid #000;
height:20px;
box-shadow:1px 0px 5px #000;
}






Official wiyono blog