Horizontal rules, or lines, in HTML programming are usually used as a separator to divide sections of a Web page. Using cascading style sheets (CSS), you may declare and apply various properties to the line when you use the "<hr>" tag in your pages. However, how the horizontal rules display differs depending on which browser you and visitors to your website use. Internet Explorer and Firefox each recognize some properties the other doesn't, so use both properties when necessary to make sure everybody sees your site the way you intend.
Open your CSS file. Type the following to create a new selector for a horizontal line:
Type the following to declare color properties:
You should use both because you don't know which browser visitors to your website use. Internet Explorer recognizes the "color" property for the "<hr>" tag, but not the "background-color" property. Firefox does the reverse.
Type the following to declare the width and height:
You may use percentages or pixels for these properties, but using a percent for the height sometimes does not produce what you want.
Type the following to declare the horizontal line's alignment:
margin: 0px auto 0px 0px;
Similar to the color property, Internet Explorer and Firefox use different ways to align horizontal rules. If, for example, you set the "width" property to 50% and only used this "text-align" property, the line in Internet Explorer would align to the left, but in Firefox, it would align in the middle.
Type the following to define a border:
border: 1px dashed;
This puts a dashed border all the way around the horizontal rule. If you set the rule to one pixel in height, or left out the height property altogether, the line itself would become dashed. Remove the "dashed" part of this property to define a solid border.
Save the CSS file and upload it to your Web server.
How to Style a Heading with CSS
HTML5 includes heading tags ranging in size from the largest, <h1>, down to the smallest, <h6>. Browsers will display headings according to...
How To Make Tables in CSS
Creating tables using Cascading Style Sheets (CSS) is an advanced way of displaying data or to create a page layout. CSS allows...
How to Create a Horizontal Line in HTML
Horizontal rule lines allow the Web publisher to separate areas of the webpage into smaller, digestible sections, thus focusing the user to...
How to Create Horizontal Tabs
Creating a horizontal tab system on your website can make for a great design feature and is easy for your readers to...
How Can We Display a Frame in Horizontal & in Vertical HTML?
When building a web page in HTML, you can use frame tags to display content from other web pages in one browser...
How to Make a Vertical Solid Line in CSS
Although HyperText Markup Language (HTML) provides a tag that creates a horizontal divider, there is not an equivalent element that creates a...
Horizontal Rule in HTML
Creating a horizontal rule, or line, is a simple HTML command. Code a horizontal rule on an HTML website with a professional...