totn CSS

CSS: border-top-color property

This CSS tutorial explains how to use the CSS property called border-top-color with syntax and examples.

Description

The CSS border-top-color property defines the color of the top border of a box.

Syntax

The syntax for the border-top-color CSS property is:

border-top-color: value;

Parameters or Arguments

value

The color of the top border. It can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the border-top-color
p { border-top-color: #FF0000; }
rgb() RGB representation of the border-top-color
p { border-top-color: rgb(255,0,0); }
name Name of the border-top-color (ie: red, blue, black, white)
p { border-top-color: red; }
transparent Border is not displayed but still takes up space on the page
p { border-top-color: transparent; }
inherit Element will inherit the border-top-color from its parent element
p { border-top-color: inherit; }

Note

Browser Compatibility

The CSS border-top-color property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-top-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let's look at a CSS border-top-color example where we have provided a hexadecimal value for the border-top-color property.

p { border-top-color: #FF0000; border-top-style: solid; }

In this border-top-color example, we have provided a hexadecimal value of #FF0000 which would display a red top border for the <p> tag. Be sure to apply a border-top-style so that the border appears.

Using RGB

We can also provide the border-top-color value using rgb.

p { border-top-color: rgb(255,0,0); border-top-style: solid; }

In this border-top-color example, rgb(255,0,0) would also display the top border for the <p> tag in red.

Using Color Name

Let's look at a CSS border-top-color example where we have provided the value as a named color.

p { border-top-color: red; border-top-style: solid; }

In this CSS border-top-color example, we have provided the name "red" which would also set the top border to red.

Share on: