CSS border-top-color Customize Border Colors Easily

Description

The border-top-color property in CSS sets the color of an element’s top border. It’s essential for customizing the appearance of your web pages. You can use various color values like named colors (e.g., red), hex codes (e.g., #ffbb00), RGB, RGBA, HSL, and HSLA. It’s also part of shorthand properties such as border-color or border-top. Mastering border-top-color can significantly improve the aesthetics and user experience of your website.

Syntax

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

/* <color> values */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255 0 0);
border-top-color: hsl(100deg 50% 25% / 75%);
border-top-color: currentcolor;
border-top-color: transparent;

/* Global values */
border-top-color: inherit;
border-top-color: initial;
border-top-color: revert;
border-top-color: revert-layer;
border-top-color: unset;

Values

The border-top-color property accepts various values:

• Color Values:
  • red
  • #ffbb00
  • rgb(255 0 0)
  • hsl(100deg 50% 25% / 75%)
  • currentcolor: Uses the current value of the color property.
  • transparent: Makes the border color transparent.
• Global Values:
  • inherit: Inherits the value from the parent element.
  • initial: Sets the value to its default.
  • revert: Reverts the value to the user agent’s default.
  • revert-layer: Reverts the value to the default for the specific layer.
  • unset: Resets the value to its natural value, which is either its initial value or the inherited value.

Formal Definition

The border-top-color property has specific characteristics:

Examples

Here are some examples to illustrate how the border-top-color property can be used:

Simple Div with a Border

HTML

<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

CSS

.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}

Clickable Examples

HTML

<div class="border-top-example" id="colorname">
  border-top-color: red
</div>
<div class="border-top-example" id="hex">
  border-top-color: #302ea3
</div>
<div class="border-top-example" id="rgb">
  border-top-color: rgb(48, 46, 163)
</div>
<div class="border-top-example" id="rgba">
  border-top-color: rgba(48, 46, 163, 0.5)
</div>
<div class="border-top-example" id="hsl">
  border-top-color: hsl(240, 75%, 35%)
</div>
<div class="border-top-example" id="hsla">
  border-top-color: hsla(240, 75%, 35%, 0.5)
</div>
<div class="border-top-example" id="transparent">
  border-top-color: transparent
</div>
<div class="border-top-example" id="initial">
  border-top-color: initial
</div>
<div class="border-top-example" id="inherit">
  border-top-color: inherit
</div>

CSS

.border-top-example {
  padding: 10px;
  border-top-style: solid;
  border-top-width: 3px;
  margin-bottom: 10px;
}

#colorname {
  border-top-color: red;
}

#hex {
  border-top-color: #302ea3;
}

#rgb {
  border-top-color: rgb(48, 46, 163);
}

#rgba {
  border-top-color: rgba(48, 46, 163, 0.5);
}

#hsl {
  border-top-color: hsl(240, 75%, 35%);
}

#hsla {
  border-top-color: hsla(240, 75%, 35%, 0.5);
}

#transparent {
  border-top-color: transparent;
}

#initial {
  border-top-color: initial;
}

#inherit {
  border-top-color: inherit;
}

Browser Compatibility

The border-top-color property is widely supported across all major web browsers:

• Chrome: Supported from version 1.0 (released in December 2008).
• Firefox: Supported from version 1.0 (released in November 2004).
• Internet Explorer/Edge: Supported from version 4.0 (released in September 1997).
• Opera: Supported from version 3.5 (released in November 1998).
• Safari: Supported from version 1.0 (released in June 2003).

See Also

For further exploration of related CSS properties, you might find the following resources helpful:

• Border-Related CSS Shorthand Properties:
  • border
  • border-top
  • border-color
• Color-Related CSS Properties for Other Borders:
  • border-right-color
  • border-bottom-color
  • border-left-color
• Other Border-Related CSS Properties:
  • border-top-style
  • border-top-width
• Default Color Value:
  • currentcolor

Related Properties

To fully utilize the border-top-color property, it’s helpful to understand related CSS properties that can be used in conjunction to achieve the desired border styling. Here are some related properties:

• Border Shorthand Properties:
  • border: A shorthand property that sets the width, style, and color of all four borders.
  • border-top: A shorthand property that sets the width, style, and color of the top border.
  • border-color: A shorthand property that sets the color of all four borders.
• Color-Related Border Properties:
  • border-right-color: Sets the color of the right border.
  • border-bottom-color: Sets the color of the bottom border.
  • border-left-color: Sets the color of the left border.
• Other Border-Related Properties:
  • border-top-style: Sets the style of the top border.
  • border-top-width: Sets the width of the top border.
• Default Color Value:
  • currentcolor: Uses the current value of the color property.