CSS border-top-color Property
border-color property is used to color all border of container with the same color.
border-top-color property provide option to fill different color from parent border-color to top border of the container.
Note: Take care of order while writing the statement in CSS, i.e CSS will take last value of the property, So, for expected output always write border-top-color below border-color.
Syntax:
border-top-color: color|transparent|initial|inherit;
Default Value : The current color of the element
Property Values:
color: It sets the color of the Element’s top-border.
Syntax:
border-top-color: color
Example:
html
<!DOCTYPE html> <html> <head> <title> CSS | border-top-color Property </title> <style> h1 { color: green; } h3 { border: 2px solid green; border-top-color: red; width: 50%; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>border-top-color:color;</h2> <h3>GeeksForGeeks</h3> <!-- Sets the color--> <p style="border-style:dotted; border-top-color:coral; width:70%;"> It is a computer science portal for geeks.</p> </body> </html> |
Output:
Transparent: It specify the transparent value of top-border.
Syntax:
border-top-color:transparent;
Example:
html
<!DOCTYPE html> <html> <head> <title> CSS | border-top-color Property </title> <style> h1 { color: green; } h3 { border: 2px solid green; border-top-color: transparent; width: 50%; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>border-top-color:transparent</h2> <h3>GeeksForGeeks</h3> <!-- Sets the color to transparent--> <p style="border-style:dotted; border-top-color:transparent; width:70%;"> It is a computer science portal for geeks.</p> </body> </html> |
Output:
initial: It sets the Property to its default value.
Syntax:
border-top-color:initial;
Example:
html
<!DOCTYPE html> <html> <head> <title> CSS | border-top-color Property </title> <style> h1 { color: green; } h3 { border: 2px solid green; border-top-color: initial; width: 50%; } </style> </head> <body> <center> <h1>GeeksForGeeks</h1> <h2>border-top-color:initial;</h2> <h3>GeeksForGeeks</h3> <!-- Sets the color to its default value--> <p style="border-style:dotted; border-top-color:initial; width:70%;"> It is a computer science portal for geeks.</p> </body> </html> |
Output:
Supported Browsers: The browser supported by css border-top-color property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0
Please Login to comment...