What is Text Stroke?
Text stroke refers to an outline or border effect applied to text characters, making them stand out by adding a defined edge around the text. This effect can improve text visibility, provide emphasis, or add stylistic elements.
How to Create Text Stroke in CSS
1. Using the -webkit-text-stroke Property:
The -webkit-text-stroke property directly applies a stroke to text.
It is supported primarily in WebKit-based browsers (like Chrome and Safari).
Syntax:
h1 {
-webkit-text-stroke: 2px black; /* 2px-wide black stroke */
}
2. Using text-shadow as an Alternative:
Since -webkit-text-stroke is not supported in all browsers, text-shadow can be used to simulate the stroke effect by creating multiple shadows around the text.
Example:
h1 {
color: white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
When to Use Text Stroke
1. For Emphasis: To make text more prominent and easier to read against busy or complex backgrounds.
2. For Design: To add a creative or dramatic effect in designs, such as logos, banners, or headings.
3. For Accessibility: To improve readability by creating a contrast between text and its background.
Properties of Text Stroke
1. Stroke Width: Defines the thickness of the stroke.
2. Stroke Color: Sets the color of the stroke.
3. Text Color: Determines the fill color inside the text.
Example with Both Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Stroke Example</title>
<style>
/* Using -webkit-text-stroke */
.stroked {
color: white;
-webkit-text-stroke: 2px black;
font-size: 48px;
font-weight: bold;
}
/* Using text-shadow */
.shadow-stroke {
color: white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
font-size: 48px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="stroked">Text Stroke Example</div>
<div class="shadow-stroke">Shadow Stroke Example</div>
</body>
</html>
Key Differences
1. How to set border to a text in html and css?
To set a stroke around text (outline the text) in HTML and CSS, you can use the `text-shadow` property. If you want more precise control or a more complex effect, you can use SVG (Scalable Vector Graphics). Here are both methods:
Method 1: Using CSS `text-shadow`
This method uses multiple `text-shadow` properties to create a stroke effect.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Stroke Example</title>
<style>
.stroked-text {
color: white; /* Text color */
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black; /* Text stroke effect */
font-size: 48px; /* Font size for better visibility */
font-weight: bold;
/* Optional: makes the text bolder */
}
</style>
</head>
<body>
<div class="stroked-text">Stroke Text Example</div>
</body>
</html>
In this example, the `text-shadow` property is used to create a black stroke around white text by applying multiple shadows at different positions.
The text-shadow property in CSS is used to add shadow effects to text. It defines one or more shadows for text, with each shadow being specified by:
1. Horizontal Offset: How far the shadow moves to the right (positive) or left (negative).
2. Vertical Offset: How far the shadow moves down (positive) or up (negative).
3. Blur Radius (optional): How blurry the shadow appears. The larger the value, the more diffused the shadow. Defaults to 0 (sharp shadow).
4. Shadow Color: The color of the shadow.
Why is text-shadow used 4 times in the example?
In this example, the text-shadow property is used to create a "stroke" effect around the text. A stroke effect outlines the text with a border-like appearance. To achieve this, shadows are placed in 4 different directions:
1. -1px -1px 0 black: A shadow 1 pixel to the top-left of the text.
2. 1px -1px 0 black: A shadow 1 pixel to the top-right of the text.
3. -1px 1px 0 black: A shadow 1 pixel to the bottom-left of the text.
4. 1px 1px 0 black: A shadow 1 pixel to the bottom-right of the text.
These 4 shadows combine to form a consistent black outline around the white text, mimicking a text stroke. This approach is necessary because CSS doesn't have a built-in text-stroke property that works consistently across all browsers. By layering these shadows, the illusion of a stroke is achieved.
Method 2: Using SVG
This method uses SVG to create a precise stroke around the text.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Text Stroke Example</title>
</head>
<body>
<svg width="600" height="100">
<text x="10" y="50" font-family="Arial" font-size="48" fill="white" stroke="black" stroke-width="2">
Stroke Text Example
</text>
</svg>
</body>
</html>
In this example, an SVG element is used to create a text element with a stroke. The `stroke` and `stroke-width` attributes define the stroke color and width, respectively, while `fill` sets the text color.