How to use text-stroke property In CSS
The text-stroke property is used to add a stroke to the text. This property can change the width and color of the text and is supported by using the -webkit- prefix.
Syntax:
-webkit-text-stroke: width color;
Example
This example uses text-stroke property to create bordered text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-stroke property
</title>
<!-- Style to use text-stroke property -->
<style>
.GFG {
color: white;
font-size: 50px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
</style>
</head>
<body>
<p class="GFG">w3wiki</p>
</body>
</html>
Output:
CSS font borders are a versatile and visually appealing way to enhance the readability and aesthetics of your text elements on a webpage. By using properties like text-shadow and text-stroke, you can create various effects that make your text stand out. Understanding and applying these CSS techniques will significantly improve your web design skills and the user experience on your site.
Supported Browser:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 3.5
- Safari 1
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
CSS Font Border
The CSS Font Border is a technique used to create a border-like outline around HTML text characters. This technique enhances visibility or adds a decorative effect to the text. It can be achieved using the text-stroke property, which allows customization of text appearance by adding a border around it.
Contact Us