CSS Stroke

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.