CSS - Is it possible to add a black outline around each character in text?

Question

I would like to add a black outline around each character, so if the font id on the same color background as the foreground it is still readable.

Can this be done in CSS with or without browser specific css?

possible duplicate of [Outline effect to text](http://stackoverflow.com/questions/4919076/outline-effect-to-text) — GSerg, Sep 19 '14 at 10:09

Yi Jiang · Accepted Answer · 2016-01-10T01:21:29.133

92

You can simulate it with the CSS 2.1 text-shadow property:

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/ for a simple demo.

edited Jan 10 '16 at 01:21

answered Jan 23 '11 at 08:23

Yi Jiang

49,435
16
136
136

text-shadow isn't supported in IE9 either. – Lea Verou Jan 24 '11 at 04:07
4

For those curious about the syntax for [Yi Jiang's answer](http://stackoverflow.com/questions/4772906/css-is-it-possible-to-add-a-black-outline-around-each-character-in-text/4772914#4772914), it's: text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; Refer to: [W3schools CSS3 text-shadow](http://www.w3schools.com/cssref/css3_pr_text-shadow.asp) for more information. – Paul Juneau Jan 09 '16 at 17:22

score 5 · Answer 2 · answered Apr 06 '19 at 23:20

While we wait for text-stroke to be widely supported, there's a pretty good "text-shadow hack" generator out there to generate the text-shadow property you need.

https://owumaro.github.io/text-stroke-generator/

h1 {
  color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}

<h1>yayyy text</h1>

Sasha Shpota · Answer 3 · 2021-10-07T16:46:44.047

5

Shadows can do the trick.

h1 {
   color: white;
   text-shadow: black 0px 0px 2px; /* color offset-x offset-y blur-radius */
}

<h1>White text with black outline</h1>

edited Oct 07 '21 at 16:46

answered Oct 07 '21 at 16:38

Sasha Shpota

9,436
14
75
148

score 2 · Answer 4 · answered Jan 24 '11 at 18:10

2

There is an explicit -webkit way to add text outline, which is with -text-stroke. This is the experimental implementation of the equivalent standards track proposal (called text-outline in the CSS3 spec docs).

answered Jan 24 '11 at 18:10

Michael Mullany

30,283
6
81
105

score 0 · Answer 5 · edited May 23 '17 at 11:47

0

Before I start I want to clarify that Yi Jiang's answer is the correct one to your question as it is, anyway I wanted to add up a little.

If you need compatible way of doing this, the only way I can think of is using a font with outline by design.

You could even use the Google's Font API and have a very compatible solution.

Good luck!

edited May 23 '17 at 11:47

Community

1
1

answered Jan 24 '11 at 17:55

Trufa

39,971
43
126
190

CSS - Is it possible to add a black outline around each character in text?

5 Answers5