Adding Border Outline Around Text in HTML CSS [Solved]

In one of my previous article I have explained about choosing text caption color while writing something on a picture or a video. Although I have explained something related to CSS too but today I am taking that in detail. I have tried my best to explain it so that anyone of you can implement it easily.

Adding border or outline around a text is a little tricky and no specific tag is available to accomplish the task but still there is a workaround. We can implement it via text-shadow property.


Exploiting text-shadow capabilities to create outline of Text :-

text-shadow a brief intro: text-shadow is a used to create shadow of any text.


text-shadow contains 4 elements to understand:-

text-shadow: horizontal-offset vertical-offset blur color


text-shadow: 1px 1px 0px #000;

Above CSS will create this effect: Example Text .

But that’s not the effect we need. But there is a workaround where we can exploit the power of text-shadow to the limit. We will try to create 4 shadows and align them one for each side (top, right, bottom, left). It’s very simple.

How to create 4 Shadows with one text-shadow property

text-shadow: shadow1, shadow2, shadow3, shadow4;

and these shadows will work like this:

shadow1 : 0px -1px 0 #000 (For Top Shadow)

shadow2: 0px 1px 0 #000 (For Bottom Shadow)

shadow3: 1px 0px 0 #000 (For Right Shadow)

shadow3: -1px 0px 0 #000 (For Left Shadow)

When we combine all these shadows like this then the desired effect is created:

text-shadow: 0px -1px 0 #000, 0px 1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000; (Final Effect).


How to Create Multiple Shadows for Cool Effects?

Cool Effect

For this effect use this:

text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;

This time I have used its blur property too. Play with text-shadow property and you can create your own custom cool effect.

Why using text-shadow and not image?

There is one straight answer to it. It decreases page size and page load time. Site Load time is one of several search engine ranking parameters. You must take care of that too.The basic rule of designing a site is, if you can accomplish something with CSS then avoid image. Use image only when you have no other choice. CSS are designed for creating effects and you must be smart enough to play with it.

What about browsers like mozilla firefox and IE?

This is important because designers main goal must be of creating effects which can run on all leading web-browsers because unfortunately they are not based upon same library. So, whenever you CSS something always include these two properties too.

1) moz property

2) webkit property

For above effect, standard CSS will be:

-webkit-text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;
-moz-text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;
text-shadow: 12px 11px 2px #f1c, 28px -3px 2px #fa0, 8px -10px 2px #8e3;

 How many Shadows Can I create within one text-shadow property?

You can create as many shadows you like. Separate them with comma keep adding more.

text-shadow: shadow1, shadow2, shadow3, shadow4, shadow5, shadow6;