Horizontal Rules

The hr element draws a horizontal rule with the full CSS <hr> property vocabulary: line styles, horizontal alignment, filled color bars with optional border and corner radius, explicit marginTop/marginBottom spacing, and a separate borderColor for two-color outlines.

All properties are optional — { "hr": {} } renders a solid black 1pt rule spanning the full content width.

note

hr replaces the former separator element. All border styles previously available on separator are supported, plus additional fill, alignment, spacing, and opacity options.

Properties

Property	Type	Default	Description
height	number	1	Thickness in points
width	number	full width	Horizontal extent in points. Omit to span the full content width.
borderStyle	string	solid	Line style: solid, dashed, dashedFixed, dotted, double, roundDots, groove, ridge, inset, outset, none
color	string	#000000	Line color
borderColor	string	—	Border color when combined with backgroundColor; draws an outline around the filled bar
backgroundColor	string	—	Fill color. When set, renders a solid colored bar instead of a line.
borderRadius	number	0	Corner radius in points. Applies to filled bars.
opacity	number	1	Transparency 0.0–1.0
marginTop	number	0	Space above the rule in points
marginBottom	number	0	Space below the rule in points
align	string	left	Horizontal alignment when width is less than content width: left, center, right
style	string	—	Named style reference

Line styles

Solid

A continuous unbroken line. The default.

{ "hr": { "height": 1, "color": "#334155" } }

Dashed

Evenly spaced dashes.

{ "hr": { "borderStyle": "dashed", "height": 1.5, "color": "#94A3B8" } }

Dotted

Evenly spaced small dots.

{ "hr": { "borderStyle": "dotted", "height": 1, "color": "#CBD5E1" } }

Round dots

Large round dots with generous spacing — decorative alternative to dotted.

{ "hr": { "borderStyle": "roundDots", "height": 2, "color": "#6366F1" } }

Double

Two parallel lines with a gap between them. height sets the total visual height across both lines and the gap.

{ "hr": { "borderStyle": "double", "height": 4, "color": "#0F172A" } }

Groove

A two-stripe engraved line using light and dark tones of color.

{ "hr": { "borderStyle": "groove", "height": 3, "color": "#64748B" } }

Ridge

A raised embossed line — the visual inverse of groove. Uses a light top stripe and a dark bottom stripe.

{ "hr": { "borderStyle": "ridge", "height": 3, "color": "#64748B" } }

Inset

A sunken line whose top edge is a darkened shade and bottom edge is a lightened shade of color.

{ "hr": { "borderStyle": "inset", "height": 3, "color": "#64748B" } }

Outset

A raised line — the visual inverse of inset. Top edge is lightened, bottom edge is darkened.

{ "hr": { "borderStyle": "outset", "height": 3, "color": "#64748B" } }

Dashed fixed

Like dashed but with a fixed dash-to-gap ratio independent of line length. Useful for consistent dash appearance across rules of different widths.

{ "hr": { "borderStyle": "dashedFixed", "height": 1, "color": "#94A3B8" } }

None

Renders no visible line — useful as a pure vertical spacer using marginTop and marginBottom.

{ "hr": { "borderStyle": "none", "marginTop": 12, "marginBottom": 12 } }

Alignment

When width is less than the content width, align controls placement. The default is left.

{ "hr": { "width": 80, "height": 3, "color": "#0F172A", "align": "center", "marginTop": 8, "marginBottom": 8 } }

{ "hr": { "width": 160, "height": 1, "color": "#94A3B8", "align": "right" } }

Filled bars

Set backgroundColor to render a solid colored bar instead of a line.

{
  "hr": {
    "height": 6,
    "backgroundColor": "#3B82F6",
    "marginTop": 4,
    "marginBottom": 4
  }
}

Add borderRadius for rounded ends (PDF):

{
  "hr": {
    "height": 8,
    "backgroundColor": "#6366F1",
    "borderRadius": 4,
    "width": 200,
    "align": "center",
    "marginTop": 6,
    "marginBottom": 6
  }
}

Outlined bars

Combine backgroundColor and borderColor to draw a filled bar with a distinct border.

{
  "hr": {
    "height": 8,
    "backgroundColor": "#E0F2FE",
    "borderColor": "#0EA5E9"
  }
}

Spacing

marginTop and marginBottom control breathing room above and below the rule without relying on surrounding paragraph spacing.

{ "hr": { "color": "#E2E8F0", "marginTop": 16, "marginBottom": 16 } }

Named styles

Define reusable rules in the document styles block and reference them with style.

{
  "document": {
    "styles": {
      "sectionDivider": { "color": "#E2E8F0", "marginTop": 12, "marginBottom": 12 },
      "accentBar":      { "height": 4, "backgroundColor": "#2563EB", "marginTop": 8, "marginBottom": 8 }
    },
    "content": [
      { "p": "Section One" },
      { "hr": { "style": "sectionDivider" } },
      { "p": "Section Two" },
      { "hr": { "style": "accentBar" } },
      { "p": "Section Three" }
    ]
  }
}

Full document example

{
  "document": {
    "styles": {
      "h2":     { "fontSize": 14, "fontWeight": "bold", "color": "#0F172A", "marginTop": 16, "marginBottom": 4 },
      "body":   { "fontSize": 10, "color": "#334155" },
      "divider":{ "color": "#E2E8F0", "marginTop": 10, "marginBottom": 10 }
    },
    "content": [
      { "p": "Annual Report 2025", "style": "h2" },
      { "hr": { "height": 3, "backgroundColor": "#1D4ED8", "marginBottom": 12 } },
      { "p": "Highlights from the fiscal year.", "style": "body" },
      { "hr": { "style": "divider" } },
      { "p": "Financial Summary", "style": "h2" },
      { "p": "Revenue grew 18% year-over-year.", "style": "body" },
      { "hr": { "style": "divider" } },
      { "p": "Outlook", "style": "h2" },
      { "p": "We expect continued growth in Q1.", "style": "body" },
      { "hr": { "width": 80, "height": 3, "color": "#1D4ED8", "align": "center", "marginTop": 20 } }
    ]
  }
}

Renderer notes

Capability	PDF	DOCX
All borderStyle values	✅	✅ (roundDots renders as square dots)
backgroundColor filled bar	✅	✅
borderColor outline on filled bar	✅	✅
width + align	✅	✅
borderRadius	✅	—
opacity	✅	—
marginTop / marginBottom	✅	✅

Live example

All border styles, filled bars, alignment, and spacing options in one renderable document.

Output

Try in Playground →

Template

Data