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"
>
w3wiki
</
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"
>
w3wiki
</
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"
>
w3wiki
</
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"
>
w3wiki
</
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