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)