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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output: Comparing the butt value with the square value
    square

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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



My Personal Notes arrow_drop_up

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.