Use the Text Border Generator to add a border or outline around your text in seconds — pick a font, set the stroke width and color, and copy the ready-to-use CSS. No signup required.
YOUR TEXT
How It Works
This tool adds a border around your text using the -webkit-text-stroke CSS property, which draws an outline directly on the font’s glyph shapes rather than around the text box. Because -webkit-text-stroke isn’t supported in every browser without a fallback, the generator also builds a text-shadow ring around the same text — a set of small shadow offsets in a full circle around each letter — so the outline still shows up correctly in browsers that don’t support the stroke property. Turning on “Include Firefox-safe fallback CSS” adds this automatically, so the code you copy works consistently across Chrome, Safari, Edge, and Firefox.
When to Use a Text Border
- Bold headings and banners — an outlined heading style helps key text stand out on hero sections or promo banners without relying on background colors or images
- Badges and labels — bordered text keeps small badge or tag text legible against busy or photo backgrounds
- WordPress heading styling — paste the generated CSS into a block’s Additional CSS class, the Gutenberg Custom CSS panel, or Elementor’s Custom CSS tab to apply the effect to any heading without installing a plugin
Frequently Asked Questions
How do I add a border to text in CSS?
Use the -webkit-text-stroke property, which takes a width and a color — for example -webkit-text-stroke: 2px #0F0D72; — and pair it with a color value for the text fill so the outline and the fill are visibly different.
Does text-stroke work in all browsers?-webkit-text-stroke is supported in Chrome, Safari, Edge, and Opera, but Firefox has inconsistent support depending on version. For a border effect that renders reliably everywhere, combine -webkit-text-stroke with a text-shadow fallback, which this generator adds automatically when the fallback option is checked.
How do I make a text outline without the text-stroke property?
Stack several text-shadow values at small offsets in a full circle around the text — for example shadows at every 30–45 degree angle using the same color and a 1–2px offset — which simulates a border effect using a property that has near-universal browser support.
Can I use this text border effect with a Google Font?
Yes — text-stroke and text-shadow apply to any loaded font, including Google Fonts. Just make sure the font is loaded on the page (via a <link> tag or @font-face) before the CSS renders, or the border will apply to the browser’s fallback font instead.
How do I change the border color and width after generating the CSS?
Edit the two values inside -webkit-text-stroke: [width] [color]; directly — the first value is the stroke width in pixels, the second is any valid CSS color (hex, rgb, or named color) — and update the matching text-shadow color if the fallback is included.