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:
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...