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"
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"
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"
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"
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
Last Updated :
21 Nov, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...