Learn how to implement text outline in CSS

I am trying to add an outline(border) style to text using CSS. There are several ways to do it, such as adding an outline or shadow effect, so I will explore these methods and think about which one suits the effect I want.

# Methods for implementing CSS outline or shadow effect

Adding an outline or shadow effect to text is used to emphasize it more than other texts. Typically, if there are core keywords, we use this method to highlight them. For now, I have classified them into three ways:

• Applying a shadow effect: text-shadow
• Applying an outline effect: -webkit-text-stroke
• Implementing an outline using a shadow effect (for browser compatibility purposes)

These three methods are the most commonly used methods. We will compare the advantages and disadvantages of using CSS and explore how to implement each method first.

!Adding shadow effect, text-shadow.

The greatest advantage of this method is its simplicity and speed of implementation. However, a disadvantage is that while it allows for adjusting the shadow's position in all directions, it also produces a blurry effect, which limits its customizability. Nonetheless, it is recommended for quick and simple application.

Below is a simple implementation. Compared to other methods, the code is also short and concise.



If you look at the implemented code above, you can see that the red shadow effect has been implemented. The actual code is as follows.

Then, let's explore the next method.

This time, the method using the -webkit-text-stroke style property in CSS to add outlines. It was not widely used before due to browser compatibility issues as it is only compatible with IE and Webkit engines. However, it is still frequently used. The method is simple. Just set the length and color, so it's easy. However, it may lack some variety in implementing various effects. Below is an example of implementation.



The implemented code is as follows.

Now, this is the method using text-shadow multiple times, which is the last method.

! Implementing outlines using text-shadow multiple times

This method has been frequently used as a CSS trick for a long time. Since using text-shadow only once has many limitations and does not produce diverse effects, the purpose is to implement the desired effect by using multiple repetitions of text-shadow. Of course, the disadvantage is that the code becomes more complex and takes more time. However, above all, the text-shadow property has high browser compatibility and is still widely used. Let's take a look at the code.

Below is the code that implements the above example.

Looking at the applied code above, the main difference is in the use of commas to implement each style in multiple directions, unlike the first method. This is the key difference. Furthermore, it is possible to use this technique multiple times to achieve different lengths of outlines or to implement outlines or inlines in desired ways.


@ Tips and tricks 
In addition, there is another way to apply the same effect. It involves using two separate text elements with identical phrases, with one of them being outlined or shadowed. This method may not be necessary in most cases but is often used when the implementation of shadow or outline effects is difficult or when animation is required.

So far, we have briefly explored the methods of applying outline or shadow effects. As it is a simple and well-known method, it is good to remember it briefly.