Outline Effect to Text – CSS

Cascading Style Sheet is a simple design language that makes the process of creating web pages presentable and appealing. Additionally, it enables us to add several styles to the text, such as color, shadow, and other elements. Adding an outline effect is one of them. Users change the font size, decoration, and font weight by applying more styling properties.

This post will describe:

• How to Add Outline Effect to Text Using “text-stroke” Property?
• How to Add Outline Effect to Text Using “text-shadow” Property?

How to Add Outline Effect to Text Using “text-stroke” Property?

The “text-stroke” property can be utilized to add an outline effect to the text. Some of the types of “text-stroke” property are mentioned below:

• “-webkit-text-stroke” property gives a stroke to the text. It can be specified as a shorthand property by setting the width and color values.
• “-webkit-text-stroke-width” determines the width of the stroke.
• “-webkit-text-stroke-color” applies the color to the stroke.
• “-webkit-text-fill-color” adds color to the text.

The text stroke property must be stated with the “webkit-” prefix. It is only supported by Webkit-based browsers, such as “Opera”, “Safari”, “Chrome”, and “Android”. Alternatively, the “text-shadow” property is compatible with almost all browsers.

For a better understanding, check out the examples mentioned below.

Example 1

Create an HTML file by following the instructions:

• First, add a “<div>” element and assign it the “content” class.
• Inside this “<div>”, add the “<p>” element with the id “text” to specify some text to the document. This “text” id will be applied with CSS properties to add an outline effect:

Now, head over to the CSS section to apply outline effects to the text.

Style “content” class

The “.content” is utilized to access the “<div>” element having class “content”. The following properties are applied to it:

• “width” property sets the element’s width.
• “margin” specifies the space around the element.

Style “p” Element

Now, access the “p” element by id “text” and apply the following properties:

Here:

• “color” specifies the element’s font color.
• “font-size” property sets the element’s font size.
• “-webkit-text-stroke” property is used to apply the outline effect to the text.

Output

Example 2

In the second example, we have set the text outline width and color by specifying the “-webkit-text-stroke-width” and “-webkit-text-stroke-color” properties.

Output

Example 3

In this example, the “font-family” property specifies the style of the element’s text.

Output

How to Add Outline Effect to Text Using “text-shadow” Property?

The CSS “text-shadow” property is utilized to add a shadow effect to text and is supported by all browsers.

Here is the graphical representation of adding multiple shadows to text:

Example 1

The description of the added properties is illustrated above.

Output

Example 2

In the above-stated code, we have applied both “text-shadow” and “-webkit-text-stroke” CSS properties.

Output

We have provided different examples to apply the outline effect to the text.

Conclusion

To add an outline effect to the text, the CSS “text-stroke” property can be utilized. This property includes “text-stroke-width”, “text-stroke-color”, and “text-fill-color”. Another property to add outline effects to text in the CSS is “text-shadow”. This blog has explained how to add an outline effect to text with multiple examples.