How To Add Text Outline With CSS (2024)

When it comes to web design, the visual appeal of your content plays a vital role in capturing and retaining your audience’s attention. One aspect of design that can significantly impact the overall aesthetics and readability of your website is text styling.

Text styling goes beyond just choosing a fontand font color. It involves carefully combining various CSSproperties to achieve the desired effect, such as utilizing text outlines to make your text visually striking.

In this article, we delve into the art of styling the outline of texts using CSS and explore how it works alongside the various options you can use.

Understanding Web Texts

Web text is text that is displayed on a web page. Fonts play a vital role in displaying text on the web. These fonts are essentially vector-based graphics, which means pixel data do not limit them and can be rendered at various sizes while maintaining their sharpness and clarity.

One fascinating aspect of fonts being vector-based graphics is the ability to apply strokes or outlines around individual characters. Like how you can draw a stroke around a shape in vector programs such as Adobe Illustrator, CSS provides the means to achieve the same effect on web text.

2 Methods To Add Text Outline With CSS

When it comes to adding an outline effect to your text using CSS, there are two methods you can employ. Let’s explore and see the downside of these methods and how to use them.

1. Using the text-stroke Property

The text-stroke is a CSS property you can use to add an outline to your texts. It allows you to specify the outline’s width and color. This property is only supported by WebKit-based browsers, and for you to use it, you must add the -webkit- prefix.

For example, let’s add stroke to an h1 heading text—“Welcome to Kinsta”:

<h1>Welcome to Kinsta</h1>

This is how the text-stroke property will be used with the -webkit- prefix:

h1 { -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: black;}

-webkit-text-stroke-width and -webkit-text-stroke-color specify the stroke’s width and color, respectively. It sets the width to 3px and color to black.

How To Add Text Outline With CSS (1)

These two properties above can be combined with the shorthand property -webkit-text-stroke, which simultaneously specifies the stroke color and width.

h1 { -webkit-text-stroke: 3px black;}

This will give the same output.

Support For text-stroke Property

According to caniuse, there is no support for the text-stroke property on the Internet Explorer browser.

How To Add Text Outline With CSS (2)

If you use the text-stroke property to set the outline of your texts and a user makes use of an unsupported browser, then such text may not be visible if its color matches the background color.

To fix this, you can use the -webkit-text-fill-color property to set a color for the text and set a fallback color with the color property:

h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke: 3px black;}
How To Add Text Outline With CSS (3)

When a browser does not support the text-stroke property, it uses the color set by the color property.

How To Add Text Outline With CSS (4)

Another option will be to confirm that the browser supports the -webkit-text-stroke property before adding the style.

@supports (-webkit-text-stroke: 3px black) { h1 { -webkit-text-fill-color: white; -webkit-text-stroke: 3px black; }}

2. Using the text-shadow Property

If you don’t want to handle support differences, you can use the text-shadow property, which has support for allthe latest versions of popular browsers.

How To Add Text Outline With CSS (5)

For the text-shadow property, we’ll use four shadows, each to the top right, top left, bottom left, and bottom right.

h1 { color: #fff; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000;}

In this example, we use four shadows to create a text outline effect. Each shadow has a 3-pixel offset from the text, and the color is set to black (#000). This effect is similar to that generated by the first method.

How To Add Text Outline With CSS (6)

By applying shadows to all four corners of the text, we achieve a well-defined outline. Feel free to adjust the pixel offsets, shadow colors, or text colors to suit your specific design preferences.

This method gives you an added advantage as you can adjust the horizontal and vertical shadows according to what suits the text. You can also add a little blur radius:

h1 { color: #fff; text-shadow: 3px 3px 2px #000, -3px 3px 2px #000, -3px -3px 0 #000, 3px -3px 0 #000;}
How To Add Text Outline With CSS (7)

One limitation of using text shadows is that you may encounter a discontinuous stroke effect when the shadow length exceeds 1 pixel (you’ll see this if you compare it with the text-stroke method).

Combining text-stroke and text-shadow Properties

You can combine both properties to achieve a visually stunning effect that combines a perfect text outline with a subtle blur and additional effects offered by the text-shadow property. This combination allows for a versatile and customizable approach to enhancing your text’s appearance.

h1 { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
How To Add Text Outline With CSS (8)

You can also do away with having to add individual shadows to each corner and apply a general shadow with one line:

#heading-1{color: white;-webkit-text-stroke: 1px #F8F8F8;text-shadow: 0px 1px 4px #23430C;}#heading-2{color: white;-webkit-text-stroke: 1px #F8F8F8;text-shadow: 0px 2px 4px red;}#heading-3{color: #333;-webkit-text-stroke: 1px #282828;text-shadow: 0px 4px 4px #282828;}
How To Add Text Outline With CSS (9)


Both the text-stroke and text-shadow properties offer valuable options for adding outlines to your text. The choice between them depends on browser compatibility, desired effects, and the level of control you require for your design.

Experiment with different techniques and find the best approach to create captivating and visually appealing text outlines. You can combine Kinsta’shosting capabilities with your complete project for an engaging online presence.

Share your experience! Did you use any other approaches not covered in this article? Let us know in the comments.

How To Add Text Outline With CSS (10)

Joel Olawanle


Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.

As an expert in web development and design, I bring extensive experience and a deep understanding of the principles and practical applications of HTML, CSS, and JavaScript, along with an intimate knowledge of user experience and web aesthetics. My expertise is grounded in years of creating and optimizing websites, teaching web development, contributing to open source projects, and staying abreast of the latest trends and technologies in web design.

My comprehensive knowledge is supported by practical experience in using various CSS properties for styling, including complex aspects like text styling and the integration of fonts as vector-based graphics. I've written numerous articles and tutorials on these topics and have conducted workshops focusing on enhancing web design through effective text styling.

In discussing the article's content, I'll break down the key concepts and technical aspects:

  1. Web Text and Fonts: Web text is displayed using fonts, which are vector-based graphics. This means they're scalable without losing quality, essential for responsive design. Vector-based nature allows for more dynamic styling options, like adding outlines or strokes.

  2. CSS Properties for Text Styling:

    • text-stroke: This property adds an outline to text. It's typically prefixed with -webkit- because of its primary support in WebKit-based browsers. The property includes sub-properties like text-stroke-width and text-stroke-color, or a shorthand version combining both.
    • text-shadow: A more universally supported alternative, this property can create an outline effect using shadow. By strategically placing shadows around text, you can mimic an outline. This property is more versatile, allowing blur effects and various shadow placements.
  3. Browser Compatibility: One challenge with text-stroke is its limited browser support. It's crucial to provide fallbacks or use feature queries (@supports) to ensure text remains visible and aesthetically pleasing across different browsers.

  4. Combining text-stroke and text-shadow: These properties can be combined for enhanced effects, allowing both the precision of text-stroke and the versatility of text-shadow. This can lead to more visually engaging and creative text styles.

  5. Practical Application and Experimentation: The article emphasizes the importance of experimentation in finding the right balance and style that suits a particular web design need. The combination of these techniques with efficient web hosting, as mentioned in the context of Kinsta, can significantly elevate the overall user experience of a website.

In conclusion, text styling in web design, particularly through CSS, is a powerful tool for enhancing visual appeal and readability. Understanding and skillfully applying properties like text-stroke and text-shadow are crucial for creating engaging and accessible web content.

How To Add Text Outline With CSS (2024)


Top Articles
Latest Posts
Article information

Author: Cheryll Lueilwitz

Last Updated:

Views: 5866

Rating: 4.3 / 5 (74 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Cheryll Lueilwitz

Birthday: 1997-12-23

Address: 4653 O'Kon Hill, Lake Juanstad, AR 65469

Phone: +494124489301

Job: Marketing Representative

Hobby: Reading, Ice skating, Foraging, BASE jumping, Hiking, Skateboarding, Kayaking

Introduction: My name is Cheryll Lueilwitz, I am a sparkling, clean, super, lucky, joyous, outstanding, lucky person who loves writing and wants to share my knowledge and understanding with you.