.jpeg)
CSS Border Color
- The border-color property is used to set the color of an element's border.
- It allows developers to create colorful and attractive borders around HTML elements.
- You can define border colors using color names, HEX values, RGB values, and other CSS color formats.
- CSS border-color can also set different colors for each side of an element.
What is CSS border-color?
The CSS border-color property is used to specify the color of an element's border.
It works together with the border-style and border-width properties
to create a complete border.
By using border-color, developers can customize the appearance of boxes, buttons, cards, and other HTML elements.
CSS border-color Syntax
div {
border-color:
blue;
}
CSS border-color Values
Color Name
Uses predefined CSS color names like red, blue, green, etc.
HEX Value
Defines colors using hexadecimal values such as #ff0000.
RGB Value
Creates colors using RGB format like rgb(255,0,0).
Transparent
Makes the border invisible by removing the color.
Setting Border Color Using Color Name
You can use predefined CSS color names to set the border color of an element.
div {
border:
3px solid;
border-color:
red;
}
Using HEX Color Values
HEX values allow you to define custom colors using six hexadecimal characters.
.box {
border-color:
#3498db;
}
Using RGB Color Values
RGB values define colors using red, green, and blue combinations.
p {
border-color:
rgb(255, 0, 0);
}
Setting Different Border Colors
CSS allows you to apply different colors to each side of an element's border.
div {
border-color:
red green blue orange;
}
Border Color for Individual Sides
You can also set border colors separately for top, right, bottom, and left sides.
div {
border-top-color:
red;
border-bottom-color:
blue;
}