How to Add Stroke using CSS ?

Last Updated : 21 Sep, 2023

CSS “stroke” typically refers to the visual effect created by the border property, outlining elements with color and style. This can be useful for emphasizing or highlighting certain elements on a webpage. Adding a stroke to an element can be achieved using various approaches and CSS properties.

There are several methods that can be used to add strokes using CSS

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

In this approach we are using the text-stroke property, to create a text outline with CSS. It adds an outline or stroke to text, specifying its width and color

Syntax:

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

selector refers to the HTML element or class to which the stroke needs to be applied.
<width> specifies the width of the stroke in pixels.
<color> defines the color of the stroke.

Note: The text-stroke property is currently only supported in WebKit browsers (such as Chrome and Safari). For other browsers, the text-stroke property can be achieved using the -webkit-text-stroke property.

Example: In this example, we are using the above-explained approach.

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

In this approach, we are using the border property to create a stroke-like effect around an element. The border property in CSS allows the styling of an element’s border. It defines its width, style, and color. Used to create borders around elements or as a decorative element.

Syntax:

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

selector refers to the HTML element or class to which the stroke needs to be applied.
<width> specifies the width of the stroke in pixels.
<color> defines the color of the stroke.

Example: In this example, we are using the above explain approach.

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>