{{CSSRef}}{{SeeCompatTable}}
Summary
The border-inline-end-width
CSS property defines the width of the logical inline 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 {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, or {{cssxref("border-left-width")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
It relates to {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, which define the other border widths of the element.
{{cssinfo}}
Syntax
border-inline-end-width: 2px; border-inline-end-width: 1.5em;
Values
<'border-width'>
- See {{ cssxref("border-width") }}
Formal syntax
{{csssyntax}}
Example
HTML Content
<div> <p class="exampleText">Example text</p> </div>
CSS Content
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; }
{{EmbedLiveSample("Example", 140, 140)}}
Specification
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}} | {{Spec2("CSS Logical Properties")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop("41.0")}}[1][2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile("41.0") }}[1][2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled
, disabled by default.
[2] Before Gecko 38, and after it, is available in a prefixed version, with a slightly different name, -moz-border-end-color
.
See also
- The mapped physical properties: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}