Movatterモバイル変換


[0]ホーム

URL:


  1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. border-inline-end-style

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

border-inline-end-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

border-inline-end-styleCSS のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これはborder-top-styleborder-right-styleborder-bottom-styleborder-left-style の何れかに対応し、どれに対応するかはwriting-modedirectiontext-orientation で定義された値によって決まります。

試してみましょう

border-inline-end-style: dotted;writing-mode: horizontal-tb;
border-inline-end-style: dotted;writing-mode: vertical-rl;
border-inline-end-style: groove;writing-mode: horizontal-tb;direction: rtl;
<section>  <div>    これは周囲に境界線があるボックスです。  </div></section>
#example-element {  background-color: #eee;  color: #000;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;  unicode-bidi: bidi-override;}

構文

css
/* <'border-style'> 値 */border-inline-end-style: dashed;border-inline-end-style: dotted;border-inline-end-style: groove;/* グローバル値 */border-inline-end-style: inherit;border-inline-end-style: initial;border-inline-end-style: revert;border-inline-end-style: revert-layer;border-inline-end-style: unset;

関連するプロパティとしては、border-block-start-styleborder-block-end-styleborder-inline-start-style が要素の他の境界のスタイルを定義します。

<'border-style'>

境界のスタイルです。border-style を参照してください。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

border-inline-end-style =
<line-style>

<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

inline-end-style の設定

HTML

html
<div>  <p>テキストの例</p></div>

CSS

css
div {  background-color: yellow;  width: 120px;  height: 120px;}.exampleText {  writing-mode: vertical-lr;  border: 5px solid blue;  border-inline-end-style: dashed;}

結果

仕様書

Specification
CSS Logical Properties and Values Level 1
# border-style

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp