Skip to main content

Horizontal line button in an ASP.NET Core rich text editor

The editor with a formatted document

A horizontal line marks a break between sections, such as before a signature or between two topics. The button is inserthorizontalrule. In the preset toolbars, it is in the More panel.

Put it on your toolbar

<richtextbox name="Body"
             toolbar="{inserthorizontalrule,bold,italic,underline}|{undo,redo}"
             height="300px"></richtextbox>

The saved HTML

<hr />

A real <hr> tells a screen reader that the topic has changed, and it survives the cleaner, exports and copying.

Style it on your site

A CSS reset may turn it into something barely visible. Style it with your own rule:

.article hr { border: 0; border-top: 1px solid #c4c7c5; margin: 2rem 0; }

A line or a heading?

If the break starts a new section with a title, use a heading instead. Readers and search engines can navigate headings, while a line only says that something changed. Keep the line for breaks that have no name.

Without touching the toolbar

Slash commands include a divider: type / on a new line and pick it.

Read next