Skip to content
Related Articles

Related Articles

CSS | Font Border
  • Last Updated : 18 Sep, 2020

Sometimes we need to create text and adding the outline to the text. There are mainly two methods to create a border to the fonts which are listed below: 
 

Method 1: Using text-shadow property: The text-shadow property is used to add font border or shadow to the text. 
Syntax: 
 

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Property Values: 
 

  • h-shadow: It sets horizontal shadow around the font.
  • v-shadow: It sets the vertical shadow around the font.
  • blur-radius: It sets the blur radius around the font.
  • color: It sets color around the font.
  • none: It does not set anything around the font.
  • initial: It sets the font border to its default value.
  • inherit: It inherits the property values from its parent values.

Return Value: It returns a font border/shadow around the text.
Example 1: This example uses text-shadow property to create shadow to the text. 
 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS text-shadow property
    </title>
 
    <style>
        h1 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
 
</html>                   

Output: 
 



Example 2: This example uses text-shadow property to create bordered text. 
 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS text-shadow property
    </title>
     
    <!-- Style to use text-shadow property -->
    <style>
        .GFG {
            color: white;
            font-size: 50px;
            text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
        }
    </style>
</head>
 
<body>
    <p class="GFG">GeeksforGeeks</p>
</body>
 
</html>                   

Output: 
 

Method 2: Using text-stroke property: The text-stroke property is used to add stroke to the text. This property can be used to change the width and color of the text. This property is supported by using the -webkit- prefix.
Example: This example uses text-stroke property to create bordered text. 
 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS text-stroke property
    </title>
     
    <!-- Style to use text-stroke property -->
    <style>
        .GFG {
            color: white;
            font-size: 50px;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: black;
        }
    </style>
</head>
 
<body>
    <p class="GFG">GeeksforGeeks</p>
</body>
 
</html>                   

Output: 
 

 

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :