CSS stroke-color property
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;" > w3wiki </ 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;" > w3wiki </ 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)
Contact Us