CSS stroke-color property
Last Updated :
08 Jun, 2023
CSS stroke-color property sets the color of stroke as of border.
Note: Since no browser supports stroke-color property, therefore, we use stroke as a shorthand property, to define the color of the stroke.
Syntax:
stroke-color: currentColor
/* Or */
stroke-color: color-name
/* Or */
stroke-color: rgb value
/* Or */
stroke-color: hexadecimal value
Property values: This property accepts property values mentioned above and described below:
- currentColor: This property value refers to the same color for stroke as of text color.
- color-name: This property value refers to the name of the color, for example: red, green, blue, etc.
- rgb_value: This property value refers to the rgb value of the color, for example: rgb(255, 0, 0), rgb(255, 350, 1), etc.
- hexadecimal-value: This property value refers to the hexadecimal value of the color, for example: #fff, #000, etc.
Example 1: Below is the example which demonstrates the use of stroke-color property using currentColor property value
html
<!DOCTYPE html>
< html >
< head >
< style >
.geek {
fill: lightgreen;
stroke-width: 10px;
stroke: currentcolor;
}
</ style >
</ head >
< body >
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 1200 400" >
< circle cx = "600" cy = "100" r = "80" class = "geek" >
</ circle >
</ svg >
</ body >
</ html >
|
Output:
Example 2: Below is the example which demonstrates the use of stroke-color property using color-name property value
html
<!DOCTYPE html>
< html >
< head >
< style >
.geek {
fill: green;
stroke-width: 10px;
stroke: red;
}
</ style >
</ head >
< body >
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 1200 400" >
< circle cx = "600" cy = "100" r = "80" class = "geek" >
</ circle >
</ svg >
</ body >
</ html >
|
Output:
Browsers Supported:
- Chrome (Not Supported)
- Safari (Not Supported)
- Firefox (Not Supported)
- Opera (Not Supported)
- Edge (Not Supported)
- Internet Explorer (Not Supported)
Share your thoughts in the comments
Please Login to comment...