Skip to content
Related Articles

Related Articles

Improve Article

CSS stroke-color property

  • Last Updated : 16 Sep, 2020

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






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




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



My Personal Notes arrow_drop_up
Recommended Articles
Page :