How can I add a border on my text in css/html/javascript

Question

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: enter image description here

Hope you can help,

regards chris

You can do that with CSS3, but this feature is experimental. Take a look at http://stackoverflow.com/questions/4919076/outline-effect-to-text and http://css-tricks.com/adding-stroke-to-web-text — marekful, Feb 05 '13 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, Feb 05 '13 at 16:06
I cannot see the picture. you should try { display: inline-block; border: 10px solid black; } — Stiger, Feb 05 '13 at 16:38

Bram Vanroy · Accepted Answer · 2013-02-05T16:37:04.160

5

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

http://jsfiddle.net/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.net/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.

edited Feb 05 '13 at 16:37

answered Feb 05 '13 at 16:29

Bram Vanroy

27,032
24
137
239

the first result with the text-shadow looks really great, and unfortunately the second one's border is inner-border – user1836363 Feb 05 '13 at 18:16
@user1836363 Then you should use the first one. :) Yes, `text-stroke` is an inner stroke. You can try to 'bypass' this by using `font-weight`. – Bram Vanroy Feb 05 '13 at 18:19

score 2 · Answer 2 · edited Feb 05 '13 at 16:30

2

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.net/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 compatibility

edited Feb 05 '13 at 16:30

Aniket Inge

25,375
5
50
78

answered Feb 05 '13 at 16:25

Ankit

680
4
17

And images will only increase traffic and page load. We don't want to use images. – Bram Vanroy Feb 05 '13 at 16:30
it totally depends on number of images if its a huge number of images then only it will make a difference as these will be vector images and will be considerably small in size – Ankit Feb 05 '13 at 16:33
It will **always** affect page load more heavily than CSS would. – Bram Vanroy Feb 05 '13 at 16:36
sorry but i cant use images because the text is variable – user1836363 Feb 05 '13 at 18:19

score 1 · Answer 3 · answered Feb 05 '13 at 16:08

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.com/adding-stroke-to-web-text/

score 0 · Answer 4 · answered Feb 05 '13 at 16:36

0

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.com/blog/2007/09/01/css-hack-text-indent-10000px/ This is what Apple uses to create beautiful typography on their website.

answered Feb 05 '13 at 16:36

Aniket Inge

25,375
5
50
78

1

As you can see, that's a post from 2007. It's 2013 alright! It's time we, as developers, start using new techniques and - if necessary - use fallbacks. Innovation is the future, lagging behind will only cause the industry to fall as well. – Bram Vanroy Feb 05 '13 at 16:38
@BramVanroy 2013 or not, there are a whole bunch of (l)users using Internet Explorer. Nothing can be said about them – Aniket Inge Feb 05 '13 at 16:40
That's why I mentioned fallbacks. :) – Bram Vanroy Feb 05 '13 at 16:41

How can I add a border on my text in css/html/javascript

4 Answers4