CSS | Font Border

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.