Open In App

CSS | stroke-linecap Property

Improve
Improve
Like Article
Like
Save
Share
Report

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
    butt

  • 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
    round

  • 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
    square

  • 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
    initial

  • 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


Last Updated : 21 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads