I have a problem, I want to add a border on my text with html, css or javascript. the size of the border should be 10px. Is this possible?

So it should be like this:

Hope you can help,

regards chris

I have a problem, I want to add a border on my text with html, css or javascript. the size of the border should be 10px. Is this possible?

So it should be like this:

Hope you can help,

regards chris

• javascript
• html
• css

• You can do that with CSS3, but this feature is experimental. Take a look at stackoverflow./questions/4919076/outline-effect-to-text and css-tricks./adding-stroke-to-web-text – marekful Commented Feb 5, 2013 at 16:05
• There's currently no CSS property which allows for text to be styled with stroke. You could achieve this using SVG, a web-safe font (or a web font). – Jules Commented Feb 5, 2013 at 16:06
• I cannot see the picture. you should try { display: inline-block; border: 10px solid black; } – Stiger Commented Feb 5, 2013 at 16:38

4 Answers 4

As said, you could try this with text-shadow, but it is not remended. I edited Ankit's solution, because it looked aliased:

http://jsfiddle/ZnfED/1409/

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

As Eric Brockman says, you could use text-stroke, but this is currently not supported by most browsers. It works on -webkit- prefixed browsers though.

Here's an example fiddle: http://jsfiddle/ZnfED/1410/

   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;

Note that -webkit-text-fill-color will always overwrite color, no matter what the order is in your CSS.

You require lot of shadows, more the number of shadows better is the effect

{
    font-size:80px;
    color: green;
   text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

Here is the link to demonstrate it: http://jsfiddle/ZnfED/1408/ you can increase/decrease the width of shadow by using any other value in text-shadow property (where i have used 4px)

NOTE : This is supported by only a few browsers

I'll suggest you to use image instead of this because you will not need to bother about browser patibility

Try adding this to your style sheet:

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

Read more about this option here: http://css-tricks./adding-stroke-to-web-text/

Instead of relying on experimental features, I suggest you create a transparent .PNG image that looks like the one you've posted, create a div with the necessary text and width, then set the text-indent property to -9999px in CSS. Set the PNG image as the background of the div using the background property. and you will have successfully used the -9999px hack.

See here: http://www.dennisplucinik./blog/2007/09/01/css-hack-text-indent-10000px/ This is what Apple uses to create beautiful typography on their website.