Open In App

CSS stroke-color property

Improve
Improve
Like Article
Like
Save
Share
Report

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)


Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads