STARIKOVS

Here’s an example of how to implement a border around some text. In this example text-shadow CSS 3 property is used.

1. text-shadow property allows to set a shadow for a one side of text. For example, it’s posssible to set the shadow only for the right side of text. To gain that, the shadow should be with a zero blur size and 1px of horizontal offset.

2. Making a border for a text, we should set a 1px shadow offset for four sides of text leaving a blur size with a zero value.

CSS of the example:

1
2
3
4
5
6
7
8
9
10

  .test {
    text-shadow: 1px 0px 0px red, 
      -1px 0px 0px red, 
      0px 1px 0px red, 
      0px -1px 0px red;
 
    font-size: 400%;
    font-weight: bold;
    color: yellow;
  }?

Here’s how it looks in your browser:

Text with border!

Try it here http://codepen.io/starikovs/pen/tzFxK.