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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: Below is the example which demonstrates  the use of stroke-color property using color-name property value

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Browsers Supported:

  • Chrome (Not Supported)
  • Safari (Not Supported)
  • Firefox (Not Supported)
  • Opera (Not Supported)
  • Edge (Not Supported)
  • Internet Explorer (Not Supported)



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.