Skip to content
Related Articles

Related Articles

Improve Article
CSS | stroke-width Property
  • Last Updated : 18 Nov, 2019

The stroke-width property is used to set the width of a border in a SVG shape. This property can only be applied to elements that have a shape or are text content elements.

Syntax:

stroke-width: <length> | <percentage>

Property Values:

  • length: It is used to set the stroke width in measurement units. It can take values in whole numbers or percentages decimals.
    A value is not required to have a unit identifier like ‘px’ or ’em’. The value without units will be based on the coordinate system of the SVG view box.

    Example 1: This example sets the stroke width without units.






    <!DOCTYPE html>
    <html>
          
    <head>
        <title>CSS | stroke-width</title>
          
        <style>
            .stroke1 {
                stroke-width: 10;
                stroke: green;
            }
            .stroke2 {
                stroke-width: 30;
                stroke: red;
            }
            .stroke3 {
                stroke-width: 50;
                stroke: orange;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | stroke-width</b>
          
        <div class="container">
            <svg height="300px" width="400px"
                xmlns="http://www.w3.org/2000/svg">
                <line class="stroke1" x1="0" x2="250"
                    y1="20" y2="20" />
                <line class="stroke2" x1="0" x2="250"
                    y1="90" y2="90" />
                <line class="stroke3" x1="0" x2="250"
                y1="200" y2="200" />
            </svg>
        </div>
    </body>
      
    </html>

    Output:
    width-no-units

    Example 2: This example sets the stroke width in pixels.




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>CSS | stroke-width</title>
          
        <style>
            .stroke1 {
                stroke-width: 5px;
                stroke: green;
            }
            .stroke2 {
                stroke-width: 10px;
                stroke: red;
            }
            .stroke3 {
                stroke-width: 20px;
                stroke: orange;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | stroke-width</b>
          
        <div class="container">
            <svg height="300px" width="400px"
                xmlns="http://www.w3.org/2000/svg">
                <circle class="stroke1" cx="60"
                    cy="50" r="25"/>
                <circle class="stroke2" cx="60"
                    cy="150" r="25"/>
                <circle class="stroke3" cx="60"
                    cy="250" r="25"/>
            </svg>
        </div>
    </body>
      
    </html>

    Output:
    width-pixels

  • percentage: It is used to set the stroke width in percentage.

    Example:




    <!DOCTYPE html>
    <html>
          
    <head>
        <title>CSS | stroke-width</title>
          
        <style>
            .stroke1 {
                stroke-width: 1%;
                stroke: green;
            }
            .stroke2 {
                stroke-width: 2%;
                stroke: red;
            }
            .stroke3 {
                stroke-width: 3%;
                stroke: orange;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>CSS | stroke-width</b>
          
        <div class="container">
            <svg height="300px" width="400px"
                xmlns="http://www.w3.org/2000/svg">
                <ellipse class="stroke1" cx="100"
                    cy="50" rx="35" ry="25" />
                <ellipse class="stroke2" cx="100"
                    cy="150" rx="35" ry="25" />
                <ellipse class="stroke3" cx="100"
                    cy="250" rx="35" ry="25" />
            </svg>
        </div>
    </body>
      
    </html>

    Output:
    width-percentage

Supported Browsers: The browsers supported by stroke-width property are listed below:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9



My Personal Notes arrow_drop_up
Recommended Articles
Page :