Open In App

CSS Font Border

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS Font Border is a technique used to create a border-like outline around HTML text characters. This technique is used to enhance the visibility or add a decorative effect to the text. This can be achieved using the “text-stroke” property, which allows to customize the appearance of text by adding a border around it.

How to Apply Font Border in CSS

There are two methods to apply font borders to text elements in HTML:

Let’s study these CSS properties in detail, and understand how are they used to put text borders in HTML.

Using text-shadow property

The Text-Shadow Property in CSS adds a shadow effect to text, providing depth and emphasis. It takes parameters for horizontal and vertical offsets, blur radius, and color, allowing designers to create various text-shadow effects for improved visual appeal.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color;

Property Values:

text-shadow property accepts a lot of values, some of them are mentioned in the table below.

Property ValueDescription
h-shadowSets the horizontal shadow around the text.
v-shadowSets the vertical shadow around the text.
blur-radiusSets the blur radius around the text shadow.
colorSets the color of the text shadow.
noneDoes not set anything around the text (no shadow).
initialSets the text shadow to its default initial value.
inheritInherits the property values from its parent element.

Return Value:

It returns a font border/shadow around the text.

Font Border Examples

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: 

text shadow CSS

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:

bordered text CSS

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.

Syntax:

-webkit-text-stroke: width color;

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: 

Supported Browser:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 15 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads