0

Possible Duplicate:
CSS Font Border?

When I'm in Photoshop, it's easy for me to type a text and then apply white border to the 'text' and then apply shadow into it.
enter image description here

But when I'm in HTML, I need a <div>, <p> or <span> or any tag like this to write a text. Then to decorate the text like this, we especially apply the decoration to the tag, NOT TO THE TEXT (or content) of the tag. Suppose:

<span id="decor">Text</span>

Then we do CSS like:

#decor{color: #9E0B0E; border: 5px solid #FFF; box-shadow: 3px 0 2px #CCC;}

But what it does is to style the span, not the content of the span tag (for here: 'Text').

So, my question is:

  • HOW TO STYLE TEXT LIKE THIS USING CSS?

SECOND EDIT

After some comments and replies, PLEASE CONSIDER THAT, The text-shadow property is doing only one job, whether a white border or a grey shadow, but I want 'em BOTH.

Community
  • 1
  • 1
Mayeenul Islam
  • 4,532
  • 5
  • 49
  • 102

2 Answers2

2

You can use

<p class="decor">Text</p>

and then

p.decor{
color: #9E0B0E; 
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
}
Axel B
  • 158
  • 5
  • I'm afraid, the `text-shadow` thing is not doing what exactly I's looking for, but doing thing partially. It's just making the white border to the text (using shadow), but I want a border along with a grey shadow, like the image above. But thanks for your answer. – Mayeenul Islam Jan 29 '13 at 07:57
  • Look at [this page](http://www.quirksmode.org/css/stroke.html) and then add text shadow. – Axel B Jan 29 '13 at 12:52
  • You can extend the text-shadow property with additional shadows: `text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 4px 4px 6px rgba(0,0,0,0.5);` – John Weisz Oct 11 '14 at 17:54
0

Unfortunately there is not any easy way to do this and support multiple browsers. Webkit supports the css tag -webkit-text-stroke but that leaves out Firefox and IE (amongst others)

Example:

p {
-webkit-text-stroke: 1px black
}
Chris569x
  • 335
  • 1
  • 3
  • 14