How do I make a border around text ?

Hi everyone

How do I make a border around text ?

I'm using a custom Webfont, works fine. I tried to add borders in stylesheet.css but it didn't worked.

(tried with text-shadow and -webkit-text-stroke, it didn't work)

Thanks if you got an idea !

I wondered this early on, too. I don't believe it has a border property to set for text. One idea is to create a sprite that matches the size of your text-box, then pin your text-box to that sprite. And if the sprite's inner part is transparent but there's a small-ish outer part, it could serve as a border for your text.

c13303 punkineo - yeah, unless there is a better way, just spawn a copy of the text that is slightly bigger/different color to fake it.

Oh that kind of a border! I see what you mean now. I like what Manley23 came up with better, then.

Thanks for the idea. Unfortunately a bigger font won't fit with the original font, unless you enlarge letter-spacing and resultats will be really random ... You can make a shadow or "height" effect that way, however.

I was hoping to get a stroke function in order to make a Lucasarts-like font for my point'n'click.

I will try to figure out with a sprite font.

Actually your idea is not that bad ! Instead of creating a bigger font in the back, I'll create 4 back-fonts of same size. That should create a stroke effect !

that works perflecty ! thanks