CSS | stroke-width Property - GeeksforGeeks

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: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:
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:
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:
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:
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:
Supported Browsers: The browsers supported by stroke-width property are listed below:
Chrome
Firefox
Safari
Opera
Internet Explorer 9
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to fetch data from localserver database and display on HTML table using PHP ?
How to Create Time-Table schedule using HTML ?
Search Bar using HTML, CSS and JavaScript
Express.js express.Router() Function
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React