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