Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to define the color of the border using CSS ?

  • Last Updated : 19 May, 2021

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

Approach: 

  • 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:

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, second will be right, and third, fourth will be bottom, left (top, right, bottom, left).

Example:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!