How to Add Stroke using CSS ? Last Updated : 09 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ContentUsing text-stroke PropertyUsing border PropertyWe will explore all the above methods along with their basic implementation with the help of examples.Approach 1: Using text-stroke PropertyThe 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.Syntaxselector { -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 PropertyThis 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.Syntaxselector { 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> Output:Output Comment More infoAdvertise with us Next Article How to Add an Iframe Border using CSS ? B bardock2393 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Add Shadow to Text using CSS? The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual 1 min read How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val 4 min read How to Add an Iframe Border using CSS ? This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<!-- CSS border to the iframe --><style> iframe { bord 1 min read How to style outline buttons using CSS ? This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different 3 min read How to Add Text Outline with CSS? Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets.1. Using text-shadow PropertyThe text-shadow property is commonly used to add shadows to text, by applying multiple shadows 1 min read How to specify the double border using CSS ? The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS. Property used: border-style property: This property is used to set the style of 2 min read Like