Tutorial 2 - Styling Horizontal Rules

Plain horizontal rules can be boring:


See? That's not so great. Use CSS to create a better-than-average divider. Try this in your CSS file:

		hr {
		margin: 1em 0;
   		border-top: 3px double #C6C6C6;
		border-right: none;
		border-bottom: none;
		border-left: none;	
   		height: 3px;
		}		
		

That will give you a more elegant-looking rule:


You can make any type of divider you like by playing with the border styles and colors. Here are a few more examples:





You can change the width too, by adding a 'width' property to the CSS. Just remember that to center the divider in its container, give the left and right margin a value of 'auto':


Next time you need a divider, make one of your own - there's no need to stick with the plain old <hr /> unless that's the style you really want.

--
Debbie Campbell
www.position-relative.com