CSS | stroke-linecap Property

The stroke-linecap property is used to define the shape that is used at the end of open subpaths.

Syntax:

stroke-linecap: butt | round | square | initial | inherit

Property Values:

butt: It is used to indicate that the stroke will not extend beyond the endpoints of the stroke. It makes the stroke appear to end at a sharp right angle.

Example:

<!DOCTYPE html> 

<html> 

<head> 

  <title> 

    CSS | stroke-linecap 

  </title> 

  <style> 

    /* Assume the round 

       value for 

       demonstration */ 

    .stroke-round { 

      stroke-linecap: round; 

      stroke-width: 20px; 

      stroke: green; 

    } 

    .stroke-butt { 

      stroke-linecap: butt; 

      stroke-width: 20px; 

      stroke: red; 

    } 

  </style> 

</head> 

<body> 

  <h1 style="color: green"> 

    GeeksforGeeks 

  </h1> 

  <b> 

    CSS | stroke-linecap 

  </b> 

  <div class="container"> 

    <svg width="400px"

      xmlns="http://www.w3.org/2000/svg"

      version="1.1"> 

      <line class="stroke-round" x1="50"

        x2="350" y1="30" y2="30" /> 

      <line class="stroke-butt" x1="50"

         x2="350" y1="60" y2="60" /> 

    </svg> 

  </div> 

</body> 

</html>

Output: Comparing the round value with the butt value

round: It is used to indicate that the ends of the stroke are extended with a semicircle of the diameter equal to the stroke width. A zero length subpath would have a full circle that is centered at the subpath’s point.

Example:

<!DOCTYPE html> 

<html> 

<head> 

  <title> 

    CSS | stroke-linecap 

  </title> 

  <style> 

    /* This is the 

       default value */ 

    .stroke-butt { 

      stroke-linecap: butt; 

      stroke-width: 20px; 

      stroke: green; 

    } 

    .stroke-round { 

      stroke-linecap: round; 

      stroke-width: 20px; 

      stroke: red; 

    } 

  </style> 

</head> 

<body> 

  <h1 style="color: green"> 

    GeeksforGeeks 

  </h1> 

  <b> 

    CSS | stroke-linecap 

  </b> 

  <div class="container"> 

    <svg width="400px" 

      xmlns="http://www.w3.org/2000/svg"

      version="1.1"> 

      <line class="stroke-butt" x1="50"

        x2="350" y1="30" y2="30" /> 

      <line class="stroke-round" x1="50"

        x2="350" y1="60" y2="60" /> 

    </svg> 

  </div> 

</body> 

</html>

Output: Comparing the butt value with the round value

square: It is used to indicate that the ends of the stroke is extended with a rectangle whose height is equal to the width of the stroke and the width is equal to half the width of the stroke. A zero-length subpath would have a square that is centered at the subpath’s point.

Example:

<!DOCTYPE html> 

<html> 

<head> 

  <title> 

    CSS | stroke-linecap 

  </title> 

  <style> 

    /* This is the default 

       value */ 

    .stroke-butt { 

      stroke-linecap: butt; 

      stroke-width: 20px; 

      stroke: green; 

    } 

    .stroke-square { 

      stroke-linecap: square; 

      stroke-width: 20px; 

      stroke: red; 

    } 

  </style> 

</head> 

<body> 

  <h1 style="color: green"> 

    GeeksforGeeks 

  </h1> 

  <b> 

    CSS | stroke-linecap 

  </b> 

  <div class="container"> 

    <svg width="400px" 

      xmlns="http://www.w3.org/2000/svg"

      version="1.1"> 

      <line class="stroke-butt" x1="50"

        x2="350" y1="30" y2="30" /> 

      <line class="stroke-square" x1="50"

        x2="350" y1="60" y2="60" /> 

    </svg> 

  </div> 

</body> 

</html>

Output: Comparing the butt value with the square value

initial: It is used to set the property to its default value.

Example:

<!DOCTYPE html> 

<html> 

<head> 

  <title> 

    CSS | stroke-linecap 

  </title> 

  <style> 

    /* Assume the round 

       value for 

       demonstration */ 

    .stroke-round { 

      stroke-linecap: round; 

      stroke-width: 20px; 

      stroke: green; 

    } 

    .stroke-butt { 

      stroke-linecap: butt; 

      stroke-width: 20px; 

      stroke: red; 

    } 

  </style> 

</head> 

<body> 

  <h1 style="color: green"> 

    GeeksforGeeks 

  </h1> 

  <b> 

    CSS | stroke-linecap 

  </b> 

  <div class="container"> 

    <svg width="400px"

      xmlns="http://www.w3.org/2000/svg" 

      version="1.1"> 

      <line class="stroke-round" x1="50"

        x2="350" y1="30" y2="30" /> 

      <line class="stroke-butt" x1="50"

        x2="350" y1="60" y2="60" /> 

    </svg> 

  </div> 

</body> 

</html>

Output: Comparing the round value with the initial value

inherit: It is used to set the property to inherit from its parent.

Supported Browsers: The browser supported by stroke-linecap property are listed below:

Chrome
Firefox
Safari
Opera
Internet Explorer 9

Article Tags :

CSS

Web Technologies

CSS-Properties