Updated June 15, 2023
Introduction to CSS Text Outline
Text outline in CSS is also called as text-stroke. Such as text-shadow in CSS can also be used in the text content to highlight some important parts or make it look different than the regular text to attract the attention of the audience of the respective page. The text-stroke property is currently under experiment and is only supported by browsers that extend support to ‘WebKit’. Hence, the syntax also uses WebKit’s prefix when used in the code. (-webkit-text-stroke).
Syntax of Text-stroke in CSS
You can use the text-stroke property in CSS as internal CSS, inline CSS, or external CSS. The syntax for text-stroke is:
Syntax:
-webkit-text-stroke: length | colorHere, the parameter length defines the width of the stroke, while the color defines the outline’s color. As mentioned earlier, this experimental property is only supported by browsers with WebKit support. When including this property in the CSS code, it must be prefixed with the keyword ‘WebKit’ for compatibility with those browsers.
Syntax:
-webkit-text-stroke: initialText-stroke is a shorthand property for two distinct properties: text-stroke-width and text-stroke-color. In CSS, a shorthand property is a property that enables users to set values for multiple properties using a single property. The width will default to 0, which is a global value, and there will be no color or the current color. The above-mentioned is a global value; the width will default as 0, and there will be no color or the current color.
How Does Text Outline Work in CSS?
Let us look at some basic examples to get a bigger picture of the feature:
Example #1
We are achieving text outline through text stroke width and color property.
- For this example, we will use external CSS. So primarily, we will create a .css file. This file will have all the defined styles we look forward to using on our pages.
- Once the .css file is created, we will define the paragraph tag’s styling, i.e., <p>. Since we are using the basic properties, we will define the values of both ‘text-stroke-width’ and ‘text-stroke-color’ separately. The code should be like this:
p{
font-size: 30px;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blueviolet;
}We have also defined a class called outline to set values differently and use the class for any required tag.
.outline{
font-size: 20px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: red;
}Combining these two pieces of code, the final CSS file should look like this:
CSS Code:
p{
font-size: 30px;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blueviolet;
}
.outline{
font-size: 20px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: red;
}Now, we will create an HTML page with a basic structure. Since we use an external style sheet, we will call it on the HTML page and define different tags accordingly to use the styling. The coding of the HTML page should be something as below:
HTML Code:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp2.css">
</head>
<body>
<p>Testing text outline properties</p>
<p class = "outline">testing text outline properties with the class 'outline'</p>
</body>Output:
Example #2
Using shorthand property text-stroke to achieve text-outline.
- Similar to the previous example, we will also use external CSS in this example. We will create/modify the CSS file.
- Instead of using two separate properties to define the text outline’s width and color, we will use the shorthand property ‘-webkit-text-stroke’ and define both properties as parameters.
- Firstly, we will write the styling for the heading tag, i.e., <h2>. The code should be:
h2{
font-size: 50px;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-webkit-text-stroke: 1px gold;
}Similar to the previous example, you can define an additional CSS class that can be applied to any tag requiring styling.
.outline{
font-size: 40px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke: 1.5px blueviolet;
}The final CSS file should look like this:
CSS Code:
h2{
font-size: 30px;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-webkit-text-stroke: 1px gold;
}
.outline{
font-size: 30px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke: 1.5px blueviolet;
}Finally, we will create an HTML page and call it the external style sheet. We will utilize all the tags and classes we styled in the .css file. The final HTML code should look like this:
HTML Code:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp2.css">
</head>
<body>
<h2>Testing text outline properties</h2>
<p class = "outline">testing text outline properties with the class 'outline'</p>
</body>Output:
Example #3
Text outlining using inline CSS.
- We are using inline CSS for this example, so creating a separate CSS file is unnecessary. We will create a new HTML page and style the elements using the style parameter.
- Create the HTML file and add the basic structural tags. Once done, identify the elements you want to style using the text-stroke property. For this example, heading and paragraph tags will be styled with different text-strokes.
- We will style <h1> first. The styling should be done as below:
<h1 style="-webkit-text-stroke: 1.5px red; color: black; font-size: 50px;">HEADING OUTLINE USING INLINE</h1>We will style <p> first. The styling should be done as below:
<p style="-webkit-text-stroke: 1px blue; color:gold; font-size: 30px;">Outlining paragraph text using text-stroke property</p>The final HTML code should look like this:
HTML Code:
<html>
<head>
<title>Text-Outline in CSS</title>
</head>
<body>
<h1 style="-webkit-text-stroke: 1.5px red; color: black; font-size: 30px;">HEADING OUTLINE USING INLINE</h1>
<p style="-webkit-text-stroke: 1px blue; color:gold; font-size: 20px;">Outlining paragraph text using text-stroke property</p>
</body>
</html>Output:
Conclusion
That was some basic usage of the text-stroke feature. The option for experimenting around is always open to curious minds. However, the downside of this feature is that WebKit-enabled browsers are the only ones that support it. For instance, if you open HTML files containing these styles in Internet Explorer, you will notice that the outline features of the text are missing. This is because IE does not extend its support to the webkit. Hence, it is advisable to use the properties and features without such constraints or conditions.
Recommended Articles
We hope that this EDUCBA information on “CSS Text Outline” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
