152

Is there a way to integrate a border around text like the image below?

text border

Community
  • 1
  • 1
jho1086
  • 1,998
  • 2
  • 16
  • 25

5 Answers5

312

Use multiple text shadows:

text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;

enter image description here

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
<h1>test</h1>

Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit prefix, it works in most browsers (including Firefox) as of 2022:

-webkit-text-stroke: 2px #fff;

enter image description here

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

h1 {
  -webkit-text-stroke: 2px #fff;
}
<h1>test</h1>

Also, read more at CSS-Tricks.

rhelminen
  • 678
  • 1
  • 5
  • 15
bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • WORTH NOTING: Please test cross-browser capabilities of these methods... Am having serious issues with clients on IE at least 9.. kinda thinking of going the PNG way. – ErickBest Sep 02 '13 at 08:58
  • 2
    @ErickBest The second link does mention IE9 problems. Though this page wasn't hard to find on google http://caniuse.com/css-textshadow – AnnanFay Apr 05 '14 at 15:58
  • Causes bad display for text with transparency (using rgba). – alejnavab Dec 02 '16 at 21:12
21

Sure. You could use CSS3 text-shadow :

text-shadow: 0 0 2px #fff;

However it wont show in all browsers right away. Using a script library like Modernizr will help getting it right in most browsers though.

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
jtheman
  • 7,421
  • 3
  • 28
  • 39
16

I don't like that much solutions based on multiplying text-shadows, it's not really flexible, it may work for a 2 pixels stroke where directions to add are 8, but with just 3 pixels stroke directions became 16, and so on... Not really confortable to manage.

The right tool exists, it's SVG <text> The browsers' support problem worth nothing in this case, 'cause the usage of text-shadow has its own support problem too, filter: progid:DXImageTransform can be used or IE < 10 but often doesn't work as expected.

To me the best solution remains SVG with a fallback in not-stroked text for older browser:

This kind of approuch works on pratically all versions of Chrome and Firefox, Safari since version 3.04, Opera 8, IE 9

Compared to text-shadow whose supports are: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, it results even more compatible.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }
<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>
holden
  • 1,721
  • 12
  • 19
  • 1
    thank you for sharing your solution. I think your right it is more flexible. But most of the time it is more efficient to use CSS. I will try to use SVG later. – jho1086 Feb 26 '18 at 11:10
  • I tried to follow your suggestion but it's not practical. An SVG requires to know exactly the size, the viewBox, as well as all other options that normal text and blocks have. Besides, it only works for stroke small relative to the text size, 3px basically deletes the fill if you have something like 16px. – II ARROWS Aug 27 '22 at 15:35
  • Another problem with this solution, it works for big text only, if I use a small text, like 12 or 16px, the border covers the whole text. – stramin Feb 08 '23 at 18:57
8
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
Samurai
  • 3,724
  • 5
  • 27
  • 39
chezwhite
  • 700
  • 7
  • 8
6

The following will cover all browsers worth covering:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */
dtbarne
  • 8,110
  • 5
  • 43
  • 49