border-block-end-width
Quick Summary for border-block-end-width
border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.
Code Usage for border-block-end-width
<pre class="brush: css notranslate"><code><span class="token comment">/ <'border-width'> values /</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> thick<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">border-block-end-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for border-block-end-width
border-block-end-width
The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.
Syntax
/* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick; /* Global values */ border-block-end-width: inherit; border-block-end-width: initial; border-block-end-width: revert; border-block-end-width: unset; Related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.
Values
<'border-width'> The width of the border. See border-width.
Formal definition
| Initial value | medium |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; 0 if the border style is none or hidden |
| Animation type | a length |
Formal syntax
<'border-top-width'>
Examples
Border width with vertical text
HTML<div> <p class="exampleText">Example text</p> </div> div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } Specifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # border-width |
See also
This property maps to one of the physical border properties:border-top-width, border-right-width, border-bottom-width, and border-left-width writing-mode, direction, text-orientation Select your preferred language English (US)EspañolFrançais日本語 Change language
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
Apparently apple had to update the thumbnail of this video.
