Home > Tutorials > HTML/CSS/JS Tutorials > Do More With Horizontal Lines

Do More With Horizontal Lines

Chances are you probably already know about the <hr> tag available inside HTML – however did you know there are plenty of features and settings built into the default <hr> tag? Settings for width, height, and even color are all available within the base tag – and fully supported by modern browsers.

<HR ALIGN="left|right|center" COLOR="color" WIDTH="width" SIZE="height">

The ALIGN parameter lets you specify left, right, or center as your default alignment for the horizontal line. The COLOR parameter lets you specify either a color name or a hex format value as the fill color for your horizontal line. WIDTH can be in either Pixels, or percentage of screen (use “n%” for percentage). Likewise, SIZE (which actually sets the HEIGHT) can also be in Pixels, or percentage of screen (again using “n%”).
















Playing With Horizonal Lines




The above was generated primarily using the default parameter options available within the <hr> tag. You can use this as a great starting point to further enhance with CSS – but now you don’t have to worry about specifying the horizontal line’s background color or size via CSS! Here is a look at the code used to generate the above display:

<HR ALIGN="left" COLOR="black" WIDTH="10px" SIZE="20px">
<HR ALIGN="left" COLOR="red" WIDTH="50px" SIZE="20px">
<HR ALIGN="left" COLOR="cyan" WIDTH="100px" SIZE="20px">
<HR ALIGN="left" COLOR="yellow" WIDTH="150px" SIZE="20px">
<HR ALIGN="left" COLOR="purple" WIDTH="200px" SIZE="20px">
<HR ALIGN="left" COLOR="orange" WIDTH="250px" SIZE="20px">
<HR ALIGN="left" COLOR="green" WIDTH="300px" SIZE="20px">
<HR ALIGN="left" COLOR="blue" WIDTH="350px" SIZE="20px">
<div style="height: 50px"><h1>Playing With Horizonal Lines</h1></div>
<HR ALIGN="left" COLOR="purple" WIDTH="500px" SIZE="40px">
<HR ALIGN="left" COLOR="orange" WIDTH="500px" SIZE="40px">

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

Understanding The Difference Between Class and ID

A good buddy of mine has recently started his own learning process diving into HTML, CSS, ...

Like every other website, this site uses cookies to deliver to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close