CSS Stroke
What is Stroke in CSS?
The term "stroke" is often associated with SVG (Scalable Vector Graphics) elements rather than regular HTML elements.
In SVG, the stroke property is used to define the color of the outline or border of a shape.
SVG Stroke Property:
Basic Stroke:
Sets the color of the stroke.
svg {
stroke: #000; /* black stroke */
}
Stroke Width:
Defines the width of the stroke.
path {
stroke-width: 2px;
}
This example sets the width of the stroke to 2 pixels.
Dashed Stroke:
Creates a dashed pattern for the stroke.
line {
stroke-dasharray: 5 2; /* 5px dash, 2px gap */
}
This example creates a dashed stroke pattern.
Round Cap:
Specifies a rounded line cap for the stroke.
line {
stroke-linecap: round;
}
This example rounds the ends of the stroke.
Miter Limit:
Sets the limit for the miter at the join of two lines.
polyline {
stroke-miterlimit: 10;
}
This example sets the miter limit to 10.
Text Stroke in CSS:
HTML conventions do not have any default strike-through CSS property, but you can use the text-shadow property to get the same effect .Here's an example:
h1 {
color: #3498db; /* Text color */
text-shadow: 2px 2px 4px #000; /* Horizontal offset, vertical offset, blur radius, color */
}
In this case we use h1 element and text shadow is applied, along with a stroke effect, to mimic the appearance of a stroke.