Borders & Shadows
Add borders, rounded corners, and box shadows to create cards, badges, and framed content.
Borders
Add borders to any element to create visual boundaries, frames, and structured layouts. Configure borders in the inspector panel under the Border section.
Border Properties
- Width — Border thickness in pixels (1px for subtle, 2–3px for visible)
- Color — Border color using the color picker or hex code
- Style — Solid, dashed, or dotted line style
Individual Sides
You can set borders on specific sides of an element:
- All sides — Uniform border around the entire element
- Top only — Useful for section dividers
- Bottom only — Underline effect for headings
- Left only — Accent bar for callouts and quotes
Left Border Accent
A thick left border (3–4px) in your brand color creates an elegant "accent bar" effect, perfect for highlighting important information or pull quotes.Border Radius (Rounded Corners)
Round the corners of any element with border radius:
- 0px — Sharp corners (default)
- 4–8px — Subtle rounding, modern look
- 12–16px — Clearly rounded, card-like appearance
- 50% — Perfect circle (for square elements) or pill shape (for wide elements)
Common Patterns
| Pattern | Border Radius | Use Case |
|---|---|---|
| Card | 8px | Content boxes, info panels |
| Badge | 4px | Status labels, tags |
| Pill | 50% | Category labels, chips |
| Circle avatar | 50% | Profile photos, logos |
Box Shadows
Add depth to elements with box shadows. Shadows create a layered, elevated appearance that draws attention and adds visual hierarchy.
Shadow Properties
- Offset X — Horizontal shadow offset (positive = right)
- Offset Y — Vertical shadow offset (positive = down)
- Blur — Shadow blur radius (higher = softer)
- Spread — Shadow size expansion
- Color — Shadow color (typically black with low opacity)
Recommended Shadow Styles
| Style | Settings | Best For |
|---|---|---|
| Subtle | 0, 1, 3, 0, rgba(0,0,0,0.1) | Cards, info boxes |
| Medium | 0, 4, 6, -1, rgba(0,0,0,0.1) | Elevated cards, images |
| Strong | 0, 10, 15, -3, rgba(0,0,0,0.15) | Modal-like emphasis |
Shadows render in the PDF exactly as you see them in the editor. Use them sparingly — one or two shadowed elements per page is usually enough.
Combining Effects
Borders, radius, and shadows work together to create rich visual effects:
- Card layout — Background color + 8px radius + subtle shadow
- Image frame — 2px border + 4px radius + medium shadow
- Status badge — Background color + text color + 4px radius + no shadow
- Callout box — Left border accent + background color + 8px radius
Next Steps
- Colors & Backgrounds — Color configuration
- Positioning & Alignment — Place elements precisely
- Template Design Patterns — Common layout patterns