## Cascading Style Sheets FAQ

CSS FAQ common constructs

### 5.1. How do I create a short, left-aligned rule for the <HR>?

There are several ways. Which one to use depends on your taste. In all cases, the trick is to position the element with the 'width', 'margin-left' and 'margin-right' properties. Here is a solution that uses the 'border' property to put a line above the HR element.

    HR {
        margin: 0.5em 60% 0.5em 0;
        border-top: solid
    }

The 'margin' property puts half an em of space above and below the rule and makes the right margin 60% (of the parent's width). The line is therefore 40% of the parent's width long.

Here is another solution, that creates a black rectangle by using the 'background' and 'height' properties.

    HR {
        margin: 0.5em 60% 0.5em 0;
        height: 0.04em;
        background: black
    }

The black rectangle is 0.04em high and has a width of 40% of the parent's width.