border-bottom-width
Quick Summary for border-bottom-width
border-bottom-width CSS property sets the width of the bottom border of an element.
Code Usage for border-bottom-width
<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> thin<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> medium<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> thick<span class="token punctuation">;</span> <span class="token comment">/ <length> values /</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> 10em<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> 3vmax<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token comment">/ Global keywords /</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
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> div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } Specifications
| 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 languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
