CSS White Text With Black Outline
In this article, we will see step by step how to create white text with a black outline in CSS. We usually use “border property” to create a border in CSS but to create a border for a text we need to use “-WebKit-text-stroke” property. We need to give two values to that property, width, and color.
Step-by-step guide to creating white text with black
Code:
<html>
<head>
<title></title>
</head>
<style type="text/css">
.black{
-webkit-text-stroke: 1.10px black; /* stroke width and color */
color: white;
-webkit-font-smoothing: antialiased;
}
</style>
<body>
<h1 class="black"> I Always Pay Myself First </h1>
</body>
</html>Result:
Steps:
- You should first create a “new text document” and write the “HTML basic structure” inside it. Then save the file in the (.html) extension.
- Then place your text in <p> or <h1> – <h6> tag inside the body section. You can create a classname for the tag containing texts as in the above code.
- We can write CSS styles in HTML documents inside <style> tag. In <style> tag, we should select your “HTML tag” using the class selector or element selector.
- To create a black outline, we should use the “-webkit-text-stroke” property and give the value as “1.10px black“.
- To create white text, we should set the “color” property to “white“.
- Now, see the above result, the text is displayed as white text with a black outline.