Open In App

How to define the color of the border using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can give the color of the border using border or border-color properties. We need to give border-style property.

Approach 1: 

  • We will give the color of the border using the border property of CSS.
  • We will give our CSS inside the tags which are also known as an inline style.
  • We need to give the border-style property to solid, dashed, double, hidden, …etc.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<body>
    <h1 style="border: rgb(195, 255, 0);
            border-style: solid;">
        Java GFG
    </h1>
    <h2 style="border: rgb(0, 140, 255);
            border-style: solid;">
        C++ GFG
    </h2>
</body>
</html>


Output :

Approach 2: 

  • In this example, we will use the CSS border-color property inside the style tag of the head section. It is also known as internal or embedded CSS.
  • If you give two colors in the border-color property then the first color will be for top/bottom and the second color will be for left-right.
  • If you give 4 colors then the first will be top, the second will be right, and third, fourth will be bottom, left (top, right, bottom, left).

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            border-color: rgb(0, 255, 76);
            border-style: dashed;
        }
 
        h2 {
            /* top->red right->blue bottom->green left->orange */
            border-color: red blue green orange;
            border-style: solid;
        }
 
        h1 {
            /* top/bottom ->red  left/right->blue */
            border-color: red blue;
            border-style: solid;
        }
    </style>
</head>
 
<body>
    <h1>Java GFG</h1>
    <h2>C++ GFG</h2>
    <h3>Python GFG</h3>
</body>
</html>


Output :

border-color CSS



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