Log in / Register

Forum › How do I...?

Thin horizontal rule (HR)

henning
Hi,

If you simply use 
<hr />
or 
<hr size="1" />
to create a horizontal rule the rule might be bigger than expected (and bigger than in the HTML version) since the HR also has a background colour and a border. In addition, the "size" parameter is deprecated.

The better approach to create a thin HR that looks the same in HTML and PDF is to use CSS to style it like this:

<html>
<head>
    <style type="text/css">
        hr.thin {
            color: #000000;
            background-color: #000000;
            height: 1px;
            border: 0;
            width: 100%;
        }
    </style>
</head>
<body>

&lt;hr /&gt;:
<hr />
<br />

&lt;hr size="1" /&gt;:
<hr size="1" />
<br />

&lt;hr class="thin" /&gt;:
<hr class="thin" />

</body>


The output is attached.

Henning
  1. output.png‎ 201.1 kB