• Post category:CSS

How to Create White Text With Black Outline in CSS

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:

css white text with black outline

Steps:

  1. You should first create a “new text document” and write the “HTML basic structure” inside it. Then save the file in the (.html) extension.
  2. 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.
  3. 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.
  4. To create a black outline, we should use the “-webkit-text-stroke” property and give the value as “1.10px black“.
  5. To create white text, we should set the “color” property to “white“.
  6. Now, see the above result, the text is displayed as white text with a black outline.

Leave a Reply