border-bottom-width
Quick Summary for border-bottom-width
The
border-bottom-width
CSS property sets the width of the bottom border of an element.
Code Usage for border-bottom-width
/* 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: unset;
More Details for border-bottom-width
border-bottom-width
The border-bottom-width
CSS property sets the width of the bottom border of an element.
Syntax
/* 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: 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:
thin
medium
thick
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 pattern thin ≤ 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 or 0 if border-bottom-style is none or hidden |
Animation type | a length |
Formal syntax
<line-width>where
<line-width> = <length> | thin | medium | thick
Examples
Comparing bottom border widths
HTML<div>Element 1</div> <div>Element 2</div>
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; }
ResultSpecifications
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # the-border-width |
See also
The other border-width-related CSS properties:border-left-width
, border-right-width
, border-top-width
, and border-width
. The other border-bottom-related CSS properties: border
, border-bottom
, border-bottom-style
, and border-bottom-color
. Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline