How to outline text in HTML / CSS

Question

Let's say I have white characters and I want a black outline over each character (this is different from outlining the whole text box).

What is the code to make this outline ?

EDIT: Well bummer, I'm not asking for a whole document. All I want is the one line of code and the needed parameters to create an outline for text. I don't feel the need to post code as it is really just a simply request.

I have tried using text-outline: 2px 2px #ff0000; but this is not supported across any major browsers.

Scope :

function createTitleLegend() {
    legendTitle = document.createElement('div');
    legendTitle.id = 'legendT';
    contentTitle = [];
    contentTitle.push('<h3><font size="16">TM</font></h3>');
    contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
    legendTitle.innerHTML = contentTitle.join('');
      legendTitle.index = 1;
}

I have tried using outline within the font, as well as a class and div. None works. The bruteforce approach doesn't seem to work either.

Yet another EDIT:

This is the key line where I want the outline.

contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');

Before I apply the outline, the string is written in one line. After I apply the outline, we have 3 different lines of text.

contentTitle is a legend in a Google Maps where the text align is at the center. That sentence that is being pushed uses two different type of fonts, one for the words and one for the number. In the event that I apply a text shadow with a div, that creates a new line. I know the normal solution for keeping everything in the same line is the use of float. However if I float, nothing is centered anymore.

Maybe I'm not floating correctly, but I've tried both div style=float and class="float" thus far.

the answer is here: w3schools.com/cssref/css3_pr_text-outline.asp "The text-outline property is not supported in any of the major browsers." — ice, Jul 04 '12 at 06:55
Okay then is there an option for me that is supported in browsers? — krikara, Jul 04 '12 at 06:56
If you'd added all relevant information to your question, like the link to a [bad resource](http://w3fools.com) and some code that shows you'd put in some effort, i wouldn't have downvoted your question. — zzzzBov, Jul 04 '12 at 06:57
So basically if I don't state that I have tried looking through different resources and trying different codes that don't seem to work, that automatically means I have not put in the effort. Okay buddy. I just don't see how putting in all the different code that doesn't work will be beneficial when all I ask for is one line of code in css. — krikara, Jul 04 '12 at 07:08
@krikara to get the ball rolling again, maybe you could add an image to represent what you are trying to achieve? Also, this link might be of use: http://stackoverflow.com/questions/4919076/outline-effect-to-text — My Head Hurts, Jul 04 '12 at 07:17
Well thanks a bunch. That seems to be a gist at what I was trying to get at. I guess wording in a question determines whether or not it sounds like 'give me teh c0dez' vs 'research effort'. Anyways, what I've been attempting was relative to strokes and outlining, but I would have never guess another simple way to implement it is with shadows. Awesome idea. — krikara, Jul 04 '12 at 07:37

score 72 · Answer 1 · edited May 23 '17 at 11:54

72

from: Outline effect to text

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

edited May 23 '17 at 11:54

Community

1
1

answered Jun 20 '13 at 04:39

niico

11,206
23
78
161

score 18 · Answer 2 · answered Jul 04 '12 at 07:50

18

Try CSS3 Textshadow.

.box_textshadow {
     text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

Try it yourself on css3please.com.

answered Jul 04 '12 at 07:50

algi

567
5
13

Yep this is pretty much it. I kept seeing answers for outlines and strokes though, but they never seemed to work. Creating text shadows will work as they virtually have the same effect. – krikara Jul 04 '12 at 07:53

WonderWorker · Answer 3 · 2018-05-14T10:40:22.507

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
 font: Tahoma, Geneva, sans-serif;
 font-size: 64px;
    color: white;
    text-shadow:
    /* Outline */
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000; /* Terminate with a semi-colon */
}
</style></head>

<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>

...and you might also want to do this too:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
 font: Tahoma, Geneva, sans-serif;
 font-size: 64px;
    color: white;
    text-shadow:
    /* Outline 1 */
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,  
    -2px 0 0 #000000,
    2px 0 0 #000000,
    0 2px 0 #000000,
    0 -2px 0 #000000, 
    /* Outline 2 */
    -2px -2px 0 #ff0000,
    2px -2px 0 #ff0000,
    -2px 2px 0 #ff0000,
    2px 2px 0 #ff0000,  
    -3px 0 0 #ff0000,
    3px 0 0 #ff0000,
    0 3px 0 #ff0000,
    0 -3px 0 #ff0000; /* Terminate with a semi-colon */
}
</style></head>

<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>

You can do as many Outlines as you like, and there's enough scope for coming up with lots of creative ideas.

Have fun!

score 5 · Answer 4 · answered Sep 09 '18 at 18:18

With HTML5's support for svg, you don't need to rely on shadow hacks.

<svg  width="100%" viewBox="0 0 600 100">
<text x=0 y=20 font-size=12pt fill=white stroke=black stroke-width=0.75>
    This text exposes its vector representation, 
    making it easy to style shape-wise without hacks. 
    HTML5 supports it, so no browser issues. Only downside 
    is that svg has its own quirks and learning curve 
    (c.f. bounding box issue/no typesetting by default)
</text>
</svg>

score 3 · Answer 5 · answered Jul 19 '20 at 18:35

3

There are some webkit css properties that should work on Chrome/Safari at least:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;

That's a 2px wide black text outline.

answered Jul 19 '20 at 18:35

Hockenmaier

61
3

score 0 · Answer 6 · edited Oct 02 '21 at 11:19

0

You can use the text-shadow property in css.

.test {

  text-shadow: 0px 0px 0px red; /* red outline */

}

Note : The offsetX and offsetY properties are set to zero so that it will look like an outine. Any other numbers will make the outline move away, making the text look clumsy.

edited Oct 02 '21 at 11:19

ouflak

2,458
10
44
49

answered Oct 02 '21 at 05:03

Coder_Naveed

526
5
5

How to outline text in HTML / CSS

6 Answers6