Since there is no text-outline in CSS, we can use text-shadows to achieve the desired text-outline effect, and we can even add a blur effect to achieve a text-shadow as well. These CSS text-shadow properties consist as a list of four comma-separated values. We chose the letter "O" for purposes of better illustration. For every letter, each comma-separated value is presented in the order of x-offset-length, y-offset-length, blur-radius (if present), and color. The text-shadow can be any color as well, but we chose red for purposes of better illustration.

O

O

O

O

O

  1. The 1st O has a 3px black text-shadow on all four sides without any blur-radiuses.
  2. The 2nd O has a 3px red text-shadow only on the upper left side with no blur-radius.
  3. The 3rd O has a 3px red text-shadow only on the lower left side with no blur-radius.
  4. The 4th O has a 3px red text-shadow only on the upper right side with no blur-radius.
  5. The 5th O has a 3px red text-shadow only on the lower right side with no blur-radius.

O

O

O

O

O

  1. The 6th O has a 1px black text-shadow on all four sides without any blur-radiuses.
  2. The 7th O has a 3px red text-shadow and a 7px blur-radius on the upper left side.
  3. The 8th O has a 3px red text-shadow and a 7px blur-radius on the lower left side.
  4. The 9th O has a 3px red text-shadow and a 7px blur-radius on the upper right side.
  5. The 10th O has a 3px red text-shadow and a 7px blur-radius on the lower right side.