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-bottom-color

border-bottom-color

Specifies the color of the bottom border.

Sample Code

style.css

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

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

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

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

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

/* border-bottom-style must also be set to make it visible */
.underline {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #0077cc;
}

/* Comparison: shorthand vs. individual properties */
div.shorthand { border-bottom: solid 2px #0077cc;}
div.longhand { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0077cc;}

Available Values

Value	Description
transparent	Sets the border to transparent.
Color code or color name	Changes the border to the specified color. If no『border-bottom-color』value is set, the color of the『color』property is used as the default.

Browser Preview

※ The sample below uses『border-style: solid』.

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