Sometimes we need to create text and adding the outline to the text. There are mainly two methods to create a border to the fonts which are listed below:
- Using text-shadow property
- Using text-stroke property
Method 1: Using text-shadow property: The text-shadow property is used to add font border or shadow to the text.
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
- h-shadow: It sets horizontal shadow around the font.
- v-shadow: It sets the vertical shadow around the font.
- blur-radius: It sets the blur radius around the font.
- color: It sets color around the font.
- none: It does not set anything around the font.
- initial: It sets the font border to its default value.
- inherit: It inherits the property values from its parent values.
Return Value: It returns a font border/shadow around the text.
Example 1: This example uses text-shadow property to create shadow to the text.
Example 2: This example uses text-shadow property to create bordered text.
Method 2: Using text-stroke property: The text-stroke property is used to add stroke to the text. This property can be used to change the width and color of the text. This property is supported by using the -webkit- prefix.
Example: This example uses text-stroke property to create bordered text.
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.