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> 