Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
}
like image 302
m0a Avatar asked Dec 24 '22 05:12

m0a


1 Answers

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>
like image 155
Temani Afif Avatar answered Apr 30 '23 02:04

Temani Afif