CSS | stroke-width Property

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.

html

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

html

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

html

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

CSS | stroke-width Property

Explore