CSS border-top-color property
CSS border-top-color property is used to specify the top border color for HTML Element(s).
The syntax to specify a value for border-top-color property is
border-top-color: value;
The following table gives the possible values that could be given to border-top-color property.
Value | Description | Example |
---|---|---|
color | Any valid CSS color value. | border-top-color: red;border-top-color: #f00;border-top-color: #ff000088;border-top-color: rgb(25, 220, 85); |
transparent | Sets top border color to transparent. | border-top-color: transparent; |
initial | Sets top border color to default value. | border-top-color: initial; |
inherit | Inherits top border color value from its parent element. | border-top-color: inherit; |
Note: Please note that there must be a style specified for border or top border, to apply this color.
Examples
In the following examples, we apply a color for top border using different types of allowed values for border-top-color property.
HEX Value for border-top-color
In the following example, we set border-top-color for <h1> elements with hex value of #ab22ff
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: #ab22ff; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
RGB Value for border-top-color
In the following example, we set border-top-color for <h1> elements with RGB color value of rgb(224, 143, 242)
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: rgb(224, 143, 242); } </style> </head> <body> <h1>Hello World</h1> </body> </html>
RGBA Value for border-top-color
In the following example, we set border-top-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5)
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: rgba(224, 143, 242, 0.5); } </style> </head> <body> <h1>Hello World</h1> </body> </html>
HSL Value for border-top-color
In the following example, we set border-top-color for <h1> elements with HSL color value of hsl(98, 49%, 74%)
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: hsl(98, 49%, 74%); } </style> </head> <body> <h1>Hello World</h1> </body> </html>
HSLA Value for border-top-color
In the following example, we set border-top-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5)
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: hsla(98, 49%, 74%, 0.5); } </style> </head> <body> <h1>Hello World</h1> </body> </html>
border-top-color transparent
In the following example, we set border-top-color for <h1> elements with value of transparent
.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> h1 { border-top: 5px solid; border-top-color: transparent; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
Conclusion
In this CSS Tutorial, we learned about border-top property, and how to use this property for HTML Elements, with examples.