div<\/code> for encapsulating multiple page elements, ul<\/code> and ol<\/code> for organizing lengthy text into a more readable list-based format, or simply use hr<\/code> to create a horizontal line.<\/p>\nThe hr<\/code> element, also known as the Horizontal Rule<\/em>, can be styled using CSS just like other elements. Do make sure to have the Mozilla Firefox and Google Chrome browsers available with you to test the various aspects related to styling this element.<\/p>\nLet’s now discuss the details. Do note that the link to download the complete source code is available at the end of this example.
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n
2. A simple usage example<\/h2>\n
Let’s quickly refresh our memory and look at a very simple scenario where an hr<\/code> will come in handy. Create an HTML file and name it example.html<\/code>. Copy and paste the below contents into it:<\/p>\nexample.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>CSS Horizontal Line Styling Example<\/title>\r\n<\/head>\r\n<body>\r\n<h2>Topic 1<\/h2>\r\n<p>This is content for topic 1<\/p>\r\n<hr>\r\n<h2>Topic 2<\/h2>\r\n<p>This is content for topic 2<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAs of now, neither have we attached any stylesheet nor applied any styles. Save the file and open it in your browser. You should see something like this:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/12\/hr_simple.jpg\")
<\/a>Fig. 1: A simple hr element<\/figcaption><\/figure>\nLet’s proceed and attach a stylesheet to our page.<\/p>\n
3. Style an hr element with CSS<\/h2>\n
Now that we have created a basic hr<\/code>, let’s create our stylesheet which will control the look and feel for the element. In the same directory as example.html<\/code>, create another file called style.css<\/code> and paste the below code into it:<\/p>\nstyle.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n}\r\n<\/pre>\nOpen example.html<\/code> and add the below highlighted line of code to attach the stylesheet to the HTML file. Here’s what the full HTML code should look like:<\/p>\nexample.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>CSS Horizontal Line Styling Example<\/title>\r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\".\/style.css\">\r\n<\/head>\r\n<body>\r\n<h2>Topic 1<\/h2>\r\n<p>This is content for topic 1<\/p>\r\n<hr>\r\n<h2>Topic 2<\/h2>\r\n<p>This is content for topic 2<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nMake sure you have saved both example.html<\/code> and style.css<\/code>. Open example.html<\/code> in your web browser to view the changes. The hr<\/code> element should resemble the below:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css.jpg\")
<\/a>Fig. 2: An hr element styled with CSS<\/figcaption><\/figure>\nWe reduced the width of the hr<\/code> element to 200px<\/code> and aligned it the left. Notice that we used the margin-left<\/code> property to do the alignment. Another way to do the same is by using the align<\/code> attribute within the hr<\/code> tag. Since the horizontal rule element look can now be controlled with our stylesheet, let’s go ahead and spice it up a little.<\/p>\n4. Add colors<\/h2>\n
You can use the CSS color<\/code> property to change the color of your line. Make the following highlighted changes to your CSS code:<\/p>\nstyle.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: blue;\r\n}\r\n<\/pre>\nIn the Mozilla Firefox browser, you should be able to see the change when you save the CSS file and refresh the\u00a0example.html<\/code> page:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_blue_firefox.jpg\")
<\/a>Fig. 3: An hr element with modified CSS color property in Mozilla Firefox<\/figcaption><\/figure>\nHowever, if you open the same page in Google Chrome, it still appears as a plain old line:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_blue_chrome_notworking.jpg\")
<\/a>Fig. 4: Google Chrome does not render the modified CSS color property for the hr element correctly<\/figcaption><\/figure>\nTo overcome this, apply another CSS property background-color<\/code>, with the same value as the previously applied color property. It should also be noted that some browsers tend to display a default 1px<\/code> border around hr<\/code> elements. To ensure a consistent look across browsers, you should explicitly specify the border<\/code> and height<\/code> properties together.<\/p>\nLet’s update our stylesheet accordingly:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: blue;\r\n\tbackground-color: blue;\r\n\tborder: 0px;\r\n\theight: 1px;\r\n}\r\n<\/pre>\nRefresh the example.html<\/code> in both Mozilla Firefox and Google Chrome – the results should now be identical. The element now renders correctly on Google Chrome, as shown below:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_blue_chrome_working.jpg\")
<\/a>Fig. 5: Additional CSS properties ensure a more consistent look across browsers<\/figcaption><\/figure>\nNow that we know how to display the styled hr<\/code> element across browsers in a more consistent way, let’s look at more ways to decorate it.<\/p>\n5. Use a background image<\/h2>\n
You can even use an image and apply it as a background. For this example, obtain any image and place it in the same directory as your source files – we have named it image.jpg<\/code>, but you can call it anything as long as you use the correct URL in the CSS. Modify your stylesheet as below:<\/p>\nstyle.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: blue;\r\n\tbackground-color: blue;\r\n\tborder: 0px;\r\n\theight: 1px;\r\n\tbackground: #fff url(image.jpg) scroll center;\r\n}\r\n<\/pre>\nHere’s what it looks like in a browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_bg_image.jpg\")
<\/a>Fig. 6: Style the hr element with a background image<\/figcaption><\/figure>\nOf course, the amount of the image that is visible depends on the height<\/code> and width<\/code> properties of the hr<\/code> element – you can play around with it to suit your preferences.<\/p>\n6. Five more creative styles<\/h2>\n
Here are 5 creative hr<\/code> styling ideas you can use in your own code. The highlighted lines in the code block for each style represent the change from our original CSS code.<\/p>\n6.1 Style 1<\/h3>\n
Below you can find the CSS code:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: blue;\r\n\tbackground-color: blue;\r\n\tborder: 0px;\r\n\theight: 1px;\r\n\tbackground-image: linear-gradient(to right, #ccc, #333, #ccc);\r\n}\r\n<\/pre>\nThis is the result in the Browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_style1.jpg\")
<\/a>Fig. 7: Creative CSS style 1 – gradient effects<\/figcaption><\/figure>\n6.2 Style 2<\/h3>\n
Below you can find the CSS code:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: gray;\r\n\tbackground-color: gray;\r\n\tborder: 0px;\r\n\theight: 1px;\r\n\tborder-bottom: 2px dashed #222;\r\n}\r\n<\/pre>\nThis is the result in the Browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_style2.jpg\")
<\/a>Fig. 8: Creative CSS style 2 – dashed line with 2 colors<\/figcaption><\/figure>\n6.3 Style 3<\/h3>\n
Below you can find the CSS code:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n\twidth: 200px;\r\n\tmargin-left: 0px;\r\n\tcolor: white;\r\n\tbackground-color: white;\r\n\tborder: 0px;\r\n\theight: 10px;\r\n\tbox-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);\r\n}\r\n<\/pre>\nThis is the result in the Browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_style3.jpg\")
<\/a>Fig. 9: Creative CSS style 3 – drop shadow effect<\/figcaption><\/figure>\n6.4 Style 4<\/h3>\n
Below you can find the CSS code:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n width: 200px;\r\n margin-left: 0px;\r\n color: white;\r\n background-color: white;\r\n border: 0px;\r\n height: 0px;\r\n box-shadow: 0 0 5px 2px gray;\r\n}\r\nhr:after {\r\n content: \"\\00a0\"; \/* prevents margin collapse *\/\r\n}\r\n<\/pre>\nThis is the result in the Browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_style4.jpg\")
<\/a>Fig. 10: Creative CSS style 4 – blur effect<\/figcaption><\/figure>\n6.5 Style 5<\/h3>\n
Below you can find the CSS code:<\/p>\n
style.css<\/em><\/span><\/p>\nhr {\r\n width: 200px;\r\n margin-left: 0px;\r\n color: white;\r\n background-color: white;\r\n border: 0px;\r\n height: 0px;\r\n border-top: 1px dashed gray;\r\n}\r\nhr:after {\r\n content: '\\002702';\r\n display: inline-block;\r\n position: relative;\r\n top: -13px;\r\n left: 20px;\r\n padding: 0 2px;\r\n background: white;\r\n color: gray;\r\n font-size: 15px;\r\n}\r\n<\/pre>\nThis is the result in the Browser:<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/11\/hr_css_style5.jpg\")
<\/a>Fig. 11: Creative CSS style 5 – scissor effect, cutting a dashed (perforated) line<\/figcaption><\/figure>\nYou can use the above CSS styles directly or customize them further to build even more interesting styles.<\/p>\n
7. Download the Source Code<\/h2>\n
This was an example on styling the hr<\/code> element in an HTML page.<\/p>\n