Open In App

What is the Outline effect to text ?

Last Updated : 12 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

 



Similar Reads

How to remove outline around text input boxes in chrome using CSS?
Generally in the case of Google Chrome Browser, when the input field gets focus then the blue outline occurred on the border of the Input fields. The Task can be done by using the CSS outline property. Example: C/C++ Code &lt;html&gt; &lt;head&gt; &lt;title&gt; How to remove outline around text input boxes in chrome using CSS? &lt;/title&gt; &lt;st
1 min read
How to Remove Focus Border (outline) Around Text/Input Boxes ?
Focus borders or outlines around text/input boxes are added by the browsers most of the time to mark indications to the element that is currently in focus. This feature provides accessibility, however, on the flip side, it might clash with certain design aesthetics. Below are the possible approaches: Table of Content Making CSS outline property equ
2 min read
How to Remove Firefox's Dotted Outline on Buttons and links using CSS ?
In Firefox browser, dotted outline appears around the buttons, links as well as inputs. The ability to tell which piece is now in focus makes this outline useful for people who browse the web using a keyboard. This is a feature of Firefox's accessibility tools, which seek to make it simpler for users to navigate online pages using keyboard shortcut
3 min read
CSS outline-width Property
The outline is the line that is created around the specified element outside the border of the element to make the particular distinct and easier to distinguish. The outline-width Property is used to specify the width of this outline for a specific element. The outline-style property must be declared or used before the outline-width property is use
3 min read
CSS outline-offset Property
The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element. An outline is a line drawn around elements outside the border edge. The space between the element and its outline is transparent. Also, the outline may be non-rectangular. The default value is 0. Syntax: outline-offset: length|initial|i
2 min read
CSS outline-style Property
The outline-style property in CSS is used to set the appearance of the outline of an element. The outline and border of an element are similar, but not the same. The outline does not take space and it is drawn outside the border of an element. Also, the outline is drawn around all the four sides of the element by default, and there is no way to alt
5 min read
CSS outline-color Property
The outline-color property of CSS sets the outline color of an element. Syntax outline-color: &lt;color&gt; | invert | inherit; Property Value: &lt;color&gt;: It sets the outline color to any valid CSS color. Example: outline-color: black; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;CSS outline-color property&lt;/title&gt; &lt;!--
2 min read
HTML | DOM Style outline Property
The Style outline property in HTML DOM is used to set or return all outline properties in one declaration. This property draws a line around an element. It sets or returns the one or more border property in short form. The outline can be set the following properties: outline-widthoutline-styleoutline-color Syntax: It returns the outline property.ob
2 min read
CSS | -moz-outline-radius property
The -moz-outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines. This property is only supported in Firefox. Syntax: -moz-outline-radius: &lt;length&gt; {1-4} | &lt;percentage&gt; (1-4} | initial | inherit Property Values: length: This is used to set the outline radius in length units. Th
3 min read
Tailwind CSS Outline
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. This class is used to control an element's outline. Outline Classes: outline-none: This class is used to hide the default browser outline on focused elements.outline-white: This class is used to add a white 2px dotted border around an element
1 min read