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

User · Answer

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

User · Answer

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

User · Answer

There s an experimental CSS property called text-stroke  supported on some browsers behind a -webkit prefix    x000D   x000D  h1   x000D      -webkit-text-stroke  2px black     width and color    x000D   x000D      font-family  sans  color  yellow  x000D    x000D   lt h1 gt Hello World lt  h1 gt  x000D   x000D   x000D    Another possible trick would be to use four shadows  one pixel each on all directions  using property text-shadow    x000D   x000D  h1   x000D         1 pixel black shadow to left  top  right and bottom    x000D      text-shadow  -1px 0 black  0 1px black  1px 0 black  0 -1px black  x000D   x000D      font-family  sans  color  yellow  x000D    x000D   lt h1 gt Hello World lt  h1 gt  x000D   x000D   x000D    But it would get blurred for more than 1 pixel thickness

User · Answer

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

User · Answer

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

User · Answer

text-shadow      1px  1px 2px black      1px -1px 2px black     -1px  1px 2px black     -1px -1px 2px black

User · Answer

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

User · Answer

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

User · Answer

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         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

User · Answer

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  gt  0         maxj   stroke   1       j-loop   j  when   j  gt  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

User · Answer

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

[css] CSS Font Border?

Examples related to css

Examples related to fonts