Add stroke around text - on the outside - with css?

Question

I have the following HTML and CSS:

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

Which renders like this:

I want to add a stroke around it, that means a black border around these text.
I Googled and found -webkit-text-stroke, and came up with:

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  -webkit-text-stroke: 2px black;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

However, the effect is not what I want:

As you can see, it seems that the stroke is added inside the text, which make the text looks too thin for me.

How can I make the stroke outside the text?

Fiddle: http://jsfiddle.net/jpjbk1z7/

PS: only webkit support is needed

Answer 1

For a smooth outside stroke emulated by text shadow, use the following 8-axis shadow:

  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;

For customisation, you can use this SASS mixin instead (although changing the size does have side effects on rendering):

@mixin stroke($color: #000, $size: 1px) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

This gives a very smooth stroke, without missing parts, like on the 4 axis solution.

Answer 2

Firefox and Safari now support a new CSS property called paint-order which can be used to simulate an outside stroke:

h1 {
  color: #00ff01;
  font-size: 3em;
  -webkit-text-stroke: 5px black;
}

.fix-stroke {
   paint-order: stroke fill;
}

<h1>the default often is ugly</h1>
<h1 class="fix-stroke">paint-order: stroke fill </h1>

Screenshot:

Answer 3

One option is to use text-shadow to simulate a stroke. Example:

text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

Answer 4

The -webkit-text-stroke doesn't support placing the stroke on the outside of the text

as this CSS-Tricks article explains:

The stroke drawn by text-stroke is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.

What about SVG?

Well it seems that it also places the stroke on the inside -

FIDDLE

However,

you might be able to simulate this effect (depending on what you need) by:

1. Change your font to a sans serif like verdana and

2. Increase the font-size of the text you are adding a stroke to.

body {
  background: grey;
  font-family: verdana;
}
.stroke,
.no-stroke {
  color: white;
  font-size: 2.5em;
}
.stroke {
  -webkit-text-stroke: 2px black;
   font-size: 2.7em;
}

<h1 class="stroke">WHAT CAREER SHOULD YOU HAVE?</h1>
<h1 class="no-stroke">WHAT CAREER SHOULD YOU HAVE?</h1>

Answer 5

Further elaborating on the other text-shadow solutions, for pixel-perfect thick round outlines the number of shadows should increase with the radius of the stroke. For example, a 10px thick outline requires 2⋅10⋅π ≈ 63 shadows distributed in all directions. To generate this in javascript, one could something like:

  const color = "#FFF" /* white outline */
  const r = 10 /* width of outline in pixels */
  const n = Math.ceil(2*Math.PI*r) /* number of shadows */
  var str = ''
  for(var i = 0;i<n;i++) /* append shadows in n evenly distributed directions */
  {
    const theta = 2*Math.PI*i/n
    str += (r*Math.cos(theta))+"px "+(r*Math.sin(theta))+"px 0 "+color+(i==n-1?"":",")
  }
  document.querySelector("#myoutlinedtext").style.textShadow = str

If the thickness is static, then just run this once to generate the string and paste it into your CSS.

Answer 6

One way I found was to stack two elements on each other having the element that stays behind get the double stroke width. The element behind leaks the stroke to the outside of the visible element making it a true stroke outside.

Also, another option is to use :after to create this second element. The downside is that you can't programmatically change the stroke

This might not work properly on big stroke values.

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  font-family: verdana;
}

.stroke { -webkit-text-stroke: 2px black; }

.stack .stroke { -webkit-text-stroke: 4px black; }
h1.stroke-fs { font-size: 2.7em; }

.stack { position: relative; }
.stack > h1:not(:first-child) {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}


.stroke-after:after { 
  -webkit-text-stroke: 4px black;
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

Stack
<div class="stack">
  <h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
  <h1>WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

After
<div style="position: relative">
  <h1 class="stroke-after" value="WHAT CARRER SHOULD YOU HAVE ?">WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

Native
<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

<hr />

Font size
<h1 class="stroke stroke-fs">WHAT CARRER SHOULD YOU HAVE ?</h1>

Answer 7

I have also tried text-shadow and -webkit-text-stroke, but unsuccessful in all ways. I could only get the result by making two divs(background and foreground) i.e,

background div with -webkit-text-stroke and foreground div without -webkit-text-stroke.

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;
                -webkit-text-stroke-color:black;
                -webkit-text-stroke-width:0.04em;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

Bt the only problem with the html generated through is twice the size(size in memory) as the div is repeated twice.

Does anyone has some better solution?

Answer 8

i know this is an old question but have a look at this:

https://jsfiddle.net/1dbta9cq/

you can simply place another text on top of the stroked text with absolute positioning, it's not so tidy but it solves the problem

<div class="container">
  <h1 class="stroke">Stroke</h1>
  <h1 class="no-stroke">Stroke</h1>
</div>

.container{
  width:300px;
}

.stroke{
  position:absolute;
  -webkit-text-stroke: 10px black;
}

.no-stroke{
  color:white;
  position:absolute
}

Answer 9

Text shadow might be used to achieve this result http://css3generator.com

Answer 10

Here's a SASS mixin I created to make it easy to create a text outline using the prefixed properties (-webkit, -moz) when supported, but falling back to just a color with text shadow. Note that the fallback doesn't work well with opaque fill colors, but other than that I think it's a pretty good solution, until we can get a standard method that has better browser support.

Fiddle

Mixin

@mixin text-stroke($fill-color, $stroke-color, $stroke-width) {
  color: $fill-color;
  text-shadow: -$stroke-width -$stroke-width 0 $stroke-color,
                $stroke-width -$stroke-width 0 $stroke-color,
               -$stroke-width  $stroke-width 0 $stroke-color,
                $stroke-width  $stroke-width 0 $stroke-color;

  @supports ((-webkit-text-stroke-color: $stroke-color) and (-webkit-text-fill-color: white))
            or ((-moz-text-stroke-color: $stroke-color) and (-moz-text-fill-color: white)) {
                        color: unset;
                  text-shadow: unset;
         -moz-text-fill-color: $fill-color;
      -webkit-text-fill-color: $fill-color;
       -moz-text-stroke-color: $stroke-color;
    -webkit-text-stroke-color: $stroke-color;
       -moz-text-stroke-width: $stroke-width;
    -webkit-text-stroke-width: $stroke-width;
  }
}

Example Usage

(Makes text semi-transparent black with a white outline)

.heading-outline {
  @include text-stroke(rgba(#000,.5), #fff, 1px);
}

Answer 11

I'm obviously late to the party but I find the easiest is probably the best way forward to a solution.

For me, I did the outside stroke effect by just making the weight of the font larger.

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  font-weight: bold;
  -webkit-text-stroke: 2px black;
}

Is it the most correct ?
Depending on the situation then the answer is yes Or no.

Does it work in your use case ?
...for me , yes perfefctly.