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 :
Contact Us