CSS: Styling horizontal line with CSS

This entry is part 6 of 26 in the series Basic CSS

IN HTML5, you are advised to use CSS to style horizontal rule <hr>.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Horizontal Rule</title>
    <style type='text/css'>
        hr {
            color: blue;
            background: blue;
            height: 3px;
            width: 50%;

<h4>The Stone Roses</h4></dt>
<hr align='left'>
<dd>The Stone Roses are an English rock band formed in Manchester in 1983. They were one of the pioneering groups of
    the Madchester movement that was active during the late 1980s and early 1990s.

As there is no CSS left alignment in styling a horizontal line, I have used an inline code align=’left’ to keep the line to the left.

I have also used background: blue so that the horizontal line is a solid blue line.

You can also refer to an earlier example, where we have styled a horizontal line using HTML.

Series Navigation<< CSS: Single and multiple rules
CSS: Classes and IDs for applying styles >>
Posted in

Leave a comment

Leave a Reply