border-bottom-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theborder-bottom-widthCSS property sets the width of the bottom border of an element.
Try it
border-bottom-width: thick;border-bottom-width: 2em;border-bottom-width: 4px;border-bottom-width: 2ex;border-bottom-width: 0;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: palegreen; color: black; border: 0 solid crimson; padding: 0.75em; width: 80%; height: 100px;}Syntax
css
/* Keyword values */border-bottom-width: thin;border-bottom-width: medium;border-bottom-width: thick;/* <length> values */border-bottom-width: 10em;border-bottom-width: 3vmax;border-bottom-width: 6px;/* Global keywords */border-bottom-width: inherit;border-bottom-width: initial;border-bottom-width: revert;border-bottom-width: revert-layer;border-bottom-width: unset;Values
<line-width>Defines the width of the border, either as an explicit nonnegative
<length>or a keyword. If it's a keyword, it must be one of the following values:thinmediumthick
Note:Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the patternthin ≤ medium ≤ thick, and the values are constant within a single document.
Formal definition
| Initial value | medium |
|---|---|
| Applies to | all elements. It also applies to::first-letter. |
| Inherited | no |
| Computed value | the absolute length or0 ifborder-bottom-style isnone orhidden |
| Animation type | alength |
Formal syntax
border-bottom-width =
<line-width>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
Examples
Comparing bottom border widths
HTML
html
<div>Element 1</div><div>Element 2</div>CSS
css
div { border: 1px solid red; margin: 1em 0;}div:nth-child(1) { border-bottom-width: thick;}div:nth-child(2) { border-bottom-width: 2em;}Result
Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Browser compatibility
Loading…
See also
- The other border-width-related CSS properties:
border-left-width,border-right-width,border-top-width, andborder-width. - The other border-bottom-related CSS properties:
border,border-bottom,border-bottom-style, andborder-bottom-color.