How to define the color of the border using CSS ?
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
Share your thoughts in the comments
Please Login to comment...