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, spacing from its style's margins, and a separate borderColor for two-color outlines.

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

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
align	string	left	Horizontal alignment when width is less than content width: left, center, right
style	string	—	Named style: its marginTop and marginBottom set the space around the rule, and its color the line's where color is unset

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 — a pure vertical spacer, its height the margins of its style.

{
  "document": {
    "styles": { "spacer": { "marginTop": 12, "marginBottom": 12 } },
    "content": [ { "hr": { "borderStyle": "none", "style": "spacer" } } ]
  }
}

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" } }

{ "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"
  }
}

Add borderRadius for rounded ends (PDF):

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

Outlined bars

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

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

Spacing

The space above and below a rule is its style's marginTop and marginBottom, as for any block.

{
  "document": {
    "styles": { "airy": { "marginTop": 16, "marginBottom": 16 } },
    "content": [ { "hr": { "color": "#E2E8F0", "style": "airy" } } ]
  }
}

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 },
      "lead":   { "marginBottom": 12 },
      "closing":{ "marginTop": 20 }
    },
    "content": [
      { "p": "Annual Report 2025", "style": "h2" },
      { "hr": { "height": 3, "backgroundColor": "#1D4ED8", "style": "lead" } },
      { "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", "style": "closing" } }
    ]
  }
}

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	✅	—
style margins (marginTop / marginBottom)	✅	✅

Live example

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

Output

Try in Playground →

Template

Data