Bordered text
x:border-width and x:border-color draw an outline that hugs every glyph and sits behind the
fill (via paint-order), so the letters read against a busy or same-tone background without the
outline eating into their shapes. It works on any xsvg text element — <x:textbox>, <textArea>,
<text>.
Syntax
<x:textbox x="20" y="22" width="520" height="104" font-size="92" align="center"
fill="#ffffff" x:border-width="4" x:border-color="#1e1b4b">BORDERED</x:textbox>
Behind the fill, not through it
A normal SVG stroke on text is painted over the fill and centered on the glyph outline, so
half of it lands inside the letter and visibly thins it. x:border-width instead renders the
outline first and the fill on top, and x:border-width is the width visible outside each glyph.
The fill therefore stays exactly its authored weight; the border only adds around it.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
x:border-width | length | 0 (no border) | width of the outline visible outside each glyph |
x:border-color | paint | — | the border colour |
How it lowers
To the glyph geometry with a stroke + paint-order that places the outline under the fill (or to
outlined <path>s where the pipeline already outlines glyphs). The result is plain, self-contained
SVG — no runtime.
See also
- Styled runs — per-run fill, weight, style and family.
- Create outlines — lower glyphs to
<path>geometry. - Textbox — the box-bound text element.