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-width

border-bottom-width

Specifies the width of the bottom border.

Sample Code

style.css

/* thin keyword (generally 1px) */
div.test { border-bottom-width: thin;}

/* medium keyword (default, generally 3px) */
div.test1 { border-bottom-width: medium;}

/* thick keyword (generally 5px) */
div.test2 { border-bottom-width: thick;}

/* Exact pixel value */
div.test3 { border-bottom-width: 10px;}

/* Hide the border */
div.test4 { border-bottom-width: 0;}

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

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

Available Values

Value	Description
Number	Specifies the border width using units such as『px』.
thin	Specifies using the keyword『thin』(narrow). Most browsers display this as 1px, though it may vary slightly.
medium	Specifies using the keyword『medium』. Most browsers display this as 3px, though it may vary slightly. This is the default value when no『border-bottom-width』is specified.
thick	Specifies using the keyword『thick』. Most browsers display this as 5px, though it may vary slightly.

Browser Preview

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

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