If the content is split into several sections, and each section has a header, should I put border below or above the header?

The “border below” approach seems prevalent (see Google, Wikipedia) but “border above” seems to work better as a separator. Which is the way to go?

Border Above

enter image description here

Border Below

enter image description here

3 Answers 3


The reason you are having difficulty deciding which to use is that the section headings are too far from the content. A larger space = separation, a closer space = association, but there must be enough difference between "larger" and "closer" to make it clear to the eye which is which. Here, the information grouping and the visual grouping are in conflict.

You can see the problem if you take the rule out completely. The heading is almost exactly half way between the content above and below it. So the heading becomes ambiguous; it associates equally with what is above it and what is below. (This is easier to see if you use random characters in place of the actual headings, so that the meanings of the words don't blind you to the purely visual presentation.)

Visual spacing should parallel the information structure. If you use Border Below, reduce the space above and below the border to about one third of its current amount, and the design will snap into place. For Border Above, reduce the spacing below the border and between the heading and the content.

Either way, the visual grouping and the information grouping will agree, and your design will work. The rule (border) here is a decorative element, not a data separator as it might be in a table or a spreadsheet.


I personally think in this case above the header..

Reason: It keeps your thought complete. Title and Pictures are grouped together and kept as a complete thought


It really depends upon what you want the title to be associated with. If it's the images above, then border below. If it's the images below, then border above.

The border serves as a content divider. If you place it below, it's clearly dividing the title from the elements below it.

A third/forth option of both above and below, or no border at all, would separate the title while not directly associating to with any neighboring content.

  • "If you place it below, it's clearly dividing the title from the elements below it." But what about Wikipedia placing the border below the headers? Or is this a different case because it's text?
    – Dan
    Jan 21, 2012 at 22:38
  • 2
    Wikipedia is dividing pages of text. With text the division isn't so prominent. However, borders below titles wouldn't work on Wikipedia if they were dividing image thumbnails. There would be the same issue you're facing.
    – Scott
    Jan 22, 2012 at 1:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.