CSS Text-Stroke Outside
What is text stroke?
It is also called a text border. CSS text-stroke outside is the border outside the text. You can use the WebKit-text-stroke CSS property to create text-stroke for all HTML elements.
How to create CSS text-stroke
<style type="text/css">
h1{
color: transparent;
-webkit-text-stroke: 2px darkred;
}
</style>
<body>
<h1>TEXT STROKE</h1>Output:
See the above output, only text stroke is displayed because we can give the text color transparent. So, the text color is not displayed.
Step-by-step explanation :
- You create an HTML element and put some text in it like in the above code.
- In CSS, first, you should select that element using an element or class selector.
- If you want to display only the text stroke, You should use the CSS “color” property and give the value as “transparent”. Or If you want to display the color of the text, You can give your desired color name to the color property.
- To create text-stroke of an HTML text, you can use the CSS “-webkit-text-stroke” property as in the above code and give the size of the stroke for ex.2px in the above code and give stoke color.
