Using CSS, how do you create a text stroke outline that is thicker than 1px?

Question

Below is the code I was using to do a Text Stroke outline of 1px. But how do I get the outline thicker? If I just replace all "1px" with "5px", the result looks crazy.

HTML

<div class="element">
Hello!
</div>

CSS

.element {
color:white;

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

That’s because text shadows are not outlines; they’re shadows. You can’t simply replace shadow positions and expect a thicker “outline”. — Sebastian Simon, Jul 21 '18 at 20:02
@TemaniAfif Why `0.5px`? The OP needs a thicker outline, not a thinner one. — Sebastian Simon, Jul 21 '18 at 20:03

score 7 · Answer 1 · answered Jul 21 '18 at 20:07

7

You can consider text-stroke but you need to pay attention to browser support

.element {
  color: white;
  font-size:50px;
  -webkit-text-stroke: 5px #000;
}

<div class="element">
  Hello!
</div>

answered Jul 21 '18 at 20:07

Temani Afif

245,468
26
309
415

1

Interestingly, this css property has been in webkit for more than a decade, but it's still not part of the official css spec. – Håken Lid Jul 21 '18 at 20:30
Didn't know this property. It would be very useful in mobile dev. – Kosh Jul 21 '18 at 20:54

score 3 · Accepted Answer · answered Jul 21 '18 at 20:52

You might use SVG as well, though it requires more code:

.element {
  font-size: 50px;
}

svg {
  width: 100%;
  height: 1.3em;
}

svg text {
  fill: pink;
  stroke-width: 8px;
  paint-order: stroke;
  stroke: violet;
}

<div class="element">
  <svg><text x="8px" y="75%">Hello kitty!</text></svg>
</div>

Using CSS, how do you create a text stroke outline that is thicker than 1px?

2 Answers2

Linked

Using CSS, how do you create a text stroke outline that is *thicker* than 1px?

2 Answers2

Linked

Using CSS, how do you create a text stroke outline that is thicker than 1px?