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>

<head>

<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>

<head>

<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>

<head>

<title>SVG Text Stroke Example</title>

</head>

<body>

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.