What is the Outline effect to text ?

Last Updated : 12 Jun, 2022

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

In this article, we will learn about the outline effect on text.

Outline effect:

The outline property allows drawing a line around the element, outside the border.

Property Used:

webkit-text-fill-color: This property is used to fill colour in the text.
webkit-text-stroke-width: This property is used to define the width of the outline.
webkit-text-stroke-color: This property is used to define the colour of the outline.

Approach:

Firstly, we will create a simple structure of an HTML file and add some CSS properties to look good.
In the last step, we will add the above 3 properties to make the outline of the text.

Example1: In the below example, we will make use of the above three properties to make the outline of the text.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body
        {
           text-align:center;
        }
         
        h1{
        /* Will override color (regardless of order) */
          -webkit-text-fill-color: white; 
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>A Computer Science portal for geeks.</h3>
</body>
</html>

Output:

Example2: In the below example, we will make use of the webkit-text-fill-color, webkit-text-stroke-width, and webkit-text-stroke properties to make an outline of the text.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body
        {
           text-align:center;
           background-color:lightgrey;
        }
         
        h3{
        /* Will override color (regardless of order) */
          -webkit-text-fill-color: white; 
          -webkit-text-stroke-width: 1px;
          -webkit-text-stroke-color: black;
        }
        h1{
            color:green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>A Computer Science portal for geeks.</h3>
</body>
</html>