CSS Font Border?

Question

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop?

Narcélio Filho · Accepted Answer · 2020-05-27T00:48:27.340

1083

There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

But it would get blurred for more than 1 pixel thickness.

edited May 27 '20 at 00:48

answered Nov 24 '10 at 17:42

Narcélio Filho

11,383
1
17
12

5

this worked for me pefrectly, I added only 1px "blur":text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black – Jakub M. Jul 20 '11 at 13:34
88

great if you only need a 1px border. But it gets ugly when using 2px or more. – Jules Colle Jul 11 '12 at 13:09
2

Note: there is a bug with the Andriod browser (http://code.google.com/p/android/issues/detail?id=7531), if you set the "blur" to be 0px, then no outline appears at all. – Mark Rhodes Nov 29 '12 at 13:18
1

btw, you can find this code in W3C CSS tip page http://www.w3.org/Style/Examples/007/text-shadow.en.html (under `DRAWING LETTERS AS OUTLINES` part) – luiges90 Jan 16 '13 at 14:22
I've found this works best on a color background and @pixelass's answer works best with an image background – SemanticZen Oct 24 '14 at 22:58
What is actually happening? – Daniel Springer Jul 07 '16 at 11:54
@DaniSpringer The text is re-written in black at the listed offsets underneath the yellow text. – GKFX Jun 04 '17 at 15:09
This -lazy- (imho) answer (but upvoted by me as well) needs elaboration. A newbie can't know what the numbers are about. – Yannis Dran May 04 '18 at 13:21
Elaborate this answer, please. – carloswm85 May 23 '20 at 14:55

score 160 · Answer 2 · 2015-02-04T12:38:01.490

160

UPDATE

Here's a SCSS mixin to generate the stroke: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

enter image description here

YES old question.. with accepted (and good) answers..

BUT...In case anybody ever needs this and hates typing code...

THIS is a 2px black border with CrossBrowser support (not IE) I needed this for @fontface fonts so it needed to be cleaner than previous seen answers... I takes every side pixelwise to make sure there are (almost) no gaps for "fuzzy" (handrawn or similar) fonts. Subpixels (0.5px) could be added but I don't need it.

Long code for just the border??? ...YES!!!

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

edited Feb 04 '15 at 12:38

answered Jan 03 '12 at 12:39

updated the code due to a duplicate of 0 2px 0 #000 and it's -/+ elements. The blur (0 before #000) could be removed but I tend to keep it even if it's 0. I should also note that it's recommended to have a minified or compressed CSS version of your code on production sites and keep a commented uncompressed version for editing. The code above is a good example why a CSS code should be minified but needs to be separated line by line for editing. – Jan 03 '12 at 22:55
I played around with the '-webkit-text-stroke' property (mainly to make fonts look nicer on UGLY UGLY windows) Yet this made the loading times way too long and even crashed my site (mac Chrome 16). So I removed it faster than the page could even load. I guess this is only intended for single lines of fonts. (I was using it for 'body') – Jan 05 '12 at 07:51
1

Have you done any performance benchmarking with this? I've found text shadow to bog down the page when scrolling, for example – Chris Bosco May 24 '12 at 19:51
@ChrisBosco -webkit- is really good with all kinds of CSS. I have experienced laggy scrolling on Opera and Firefox on some of my other hardcore CSS projects. mobile safari also seems to have a problem if a gradient, box-shadow or text-shadow has too many layers. – May 28 '12 at 14:37
1

I've found this works best on an image background and @Narcélio Filho's answer works best with a color background – SemanticZen Oct 24 '14 at 23:02
This seems not to work as desired if your units provided are viewport-relative and not in pixels. – Muhammad Abdul-Rahim Dec 18 '18 at 20:51
1

the original codepen "disappeared", so I created a new one with the original code from this post and also made a comparison of the other solutions mentioned here https://codepen.io/Grienauer/pen/GRRdRJr – Grienauer Nov 06 '19 at 17:57

score 54 · Answer 3 · answered Apr 03 '10 at 10:51

You could perhaps emulate a text-stroke, using the css text-shadow (or -webkit-text-shadow/-moz-text-shadow) and a very low blur:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

But while this is more widely available than the -webkit-text-stroke property, I doubt that it's available to the majority of your users, but that might not be a problem (graceful degradation, and all that).

It should be noted that it is possible to totally omit the third argument in order to have no blur at all. — François Feugeas, Jun 21 '11 at 15:02

score 26 · Answer 4 · answered Apr 18 '12 at 12:07

To elaborate more on some answers that have mentioned -webkit-text-stroke, here's is the code to make it work:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

An in-depth article about using text stroke is here and a list of browsers that support text stroke is here.

score 17 · Answer 5 · answered Apr 03 '10 at 10:44

17

There seems to be a 'text-stroke' property, but (at least for me) it only works in Safari.

http://webkit.org/blog/85/introducing-text-stroke/

answered Apr 03 '10 at 10:44

andsve

718
1
8
18

score 13 · Answer 6 · answered Nov 24 '14 at 10:10

Here's what I'm using :

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

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

score 3 · Answer 7 · edited Feb 19 '21 at 18:07

Sorry I'm late, but speaking about text-shadow, I thought you would also like this example (I use it quite often when I need good shadows on text):

text-shadow:
    -2px   -2px lightblue,
    -2px -1.5px lightblue,
    -2px   -1px lightblue,
    -2px -0.5px lightblue,
    -2px    0px lightblue,
    -2px  0.5px lightblue,
    -2px    1px lightblue,
    -2px  1.5px lightblue,
    -2px    2px lightblue,
    -1.5px  2px lightblue,
    -1px    2px lightblue,
    -0.5px  2px lightblue,
    0px     2px lightblue,
    0.5px   2px lightblue,
    1px     2px lightblue,
    1.5px   2px lightblue,
    2px     2px lightblue,
    2px   1.5px lightblue,
    2px     1px lightblue,
    2px   0.5px lightblue,
    2px     0px lightblue,
    2px  -0.5px lightblue,
    2px    -1px lightblue,
    2px  -1.5px lightblue,
    2px    -2px lightblue,
    1.5px  -2px lightblue,
    1px    -2px lightblue,
    0.5px  -2px lightblue,
    0px    -2px lightblue,
    -0.5px -2px lightblue,
    -1px   -2px lightblue,
    -1.5px -2px lightblue;

score 2 · Answer 8 · answered Apr 20 '14 at 09:23

2

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

answered Apr 20 '14 at 09:23

user2987790

125
8

score 2 · Answer 9 · answered Jul 03 '15 at 08:53

Stroke font-character with a Less mixin

Here's a LESS mixin to generate the stroke: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(it's based on pixelass answer that instead uses SCSS)

score 1 · Answer 10 · answered Nov 06 '19 at 18:03

1

I created a comparison of all the solutions mentioned here to have a quick overview:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

answered Nov 06 '19 at 18:03

Grienauer

329
2
10

score 0 · Answer 11 · edited Jan 23 '18 at 07:36

I once tried to do those round corners and drop shadows with css3. Later on, I found it is still poorly supported (Internet Explorer(s), of course!)

I ended up trying to do that in JS (HTML canvas with IE Canvas), but it impacts the performance a lot (even on my C2D machine). In short, if you really need the effect, consider JS libraries (most of them should be able to run on IE6) but don't over do it due to performance issues; if you still need an alternative... you could use SFiR, then PS it and SFiR it. CSS3 isn't ready today.

CSS Font Border?

11 Answers11

UPDATE

Stroke font-character with a Less mixin

Linked

Related