How to Add Stroke using CSS ?

Last Updated : 09 Oct, 2024

Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.

Several methods can be used to add strokes using CSS:

Table of Content

Using text-stroke Property
Using border Property

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using text-stroke Property

The text-stroke property approach involves using -webkit-text-stroke to add an outline around text in supported browsers like Chrome and Safari. This property specifies the stroke's width and color, creating bold, defined edges around text for enhanced visibility and stylistic effects.

Syntax

selector {
    -webkit-text-stroke: <width> <color>;
    text-stroke: <width> <color>;
}

Example: In this example we styles the heading using the -webkit-text-stroke property for text outlines. The "GeeksforGeeks" heading has a 2px green stroke for WebKit browsers and a black stroke fallback for others.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            -webkit-text-stroke: 2px green;
            text-stroke: 2px black;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>

Output:

Approach 2: Using border Property

This approach applies to block elements (like div, p, etc.), where the border property is used to create a stroke or outline around the element itself. The border property allows you to define the stroke’s thickness, style, and color.

Syntax

selector {
    border: <width> solid <color>;
}

Example: Here we creates a green heading titled "GeeksforGeeks" and a rectangular box with a 3px green border. The box has dimensions of 200px width and 100px height.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            border: 3px solid green;
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <div class="box"></div>
</body>

</html>