Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-top-color

border-top-color

Specifies the color of the top border.

Sample Code

style.css

/* Color name */
div.test { border-top-color: red;}

/* Hex color code */
div.test1 { border-top-color: #ff0;}

/* Transparent (border space exists but is invisible) */
div.test2 { border-top-color: transparent;}

/* rgb() function */
div.test3 { border-top-color: rgb(0, 119, 204);}

/* rgba() for semi-transparency */
div.test4 { border-top-color: rgba(0, 0, 0, 0.3);}

/* border-top-style must also be set to make it visible */
.top-accent {
	border-top-style: solid;
	border-top-width: 4px;
	border-top-color: #ff6600;
}

/* Color-coded card top accents */
.card-red  { border-top: 4px solid red;}
.card-blue { border-top: 4px solid #0077cc;}

Available Values

Value	Description
transparent	Sets the border color to transparent.
Color code or color name	Changes the border to the specified color. If no value is set for 'border-top-color', the color from the 'color' property is used as the initial value.

Browser Preview

※ The samples below have 'border-style' set to 'solid'.

<div style="border-top-color: red; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>