--- title: border-inline-end-style slug: Web/CSS/border-inline-end-style tags: - CSS - CSS Logical Property - CSS Property - CSS プロパティ - CSS 論理的プロパティ - Experimental - Reference - border-inline - border-inline-end - border-inline-end-style - border-inline-style translation_of: Web/CSS/border-inline-end-style ---
border-inline-end-style
は CSS のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
/* <'border-style'> 値 */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove;
関連するプロパティとしては、 {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。
{{cssinfo}}
<'border-style'>
<div> <p class="exampleText">Example text</p> </div>
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; }
{{EmbedLiveSample("Example", 140, 140)}}
仕様書 | 状態 | 備考 |
---|---|---|
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-block-end-style")}} | {{Spec2("CSS Logical Properties")}} | 初回定義 |
{{Compat("css.properties.border-block-end-style")}}