border-start-end-radius プロパティと writing-mode、direction、text-orientation

CSS Miscellaneous: border-start-end-radius プロパティ

border-start-end-radius プロパティは、要素の境界線の論理的な角丸の半径を指定します。これは、要素の writing-mode、direction、text-orientation に基づいて、物理的な角丸半径にマッピングされます。

用途

このプロパティは、テキストの方向や書き方に関係なく、スタイルを構築する際に役立ちます。例えば、以下の様な用途があります。

• 左右対称な角丸を作りたい場合
• 縦書きの文章で、左上の角丸と右下の角丸を同じ大きさで表現したい場合
• RTL（右から左に書く）言語で、角丸のデザインを維持したい場合

使い方

border-start-end-radius プロパティは、以下の形式で記述します。

border-start-end-radius: <length> | <percentage>;

• <length> は、ピクセル (px) やエム (em) などの長さの単位で指定します。
• <percentage> は、要素の幅または高さに対する割合で指定します。

例

以下の例は、要素の左上の角丸と右下の角丸をそれぞれ 10px に設定します。

border-start-end-radius: 10px;

以下の例は、要素の左上の角丸と右下の角丸をそれぞれ、要素の幅の 20% と高さの 50% に設定します。

border-start-end-radius: 20% 50%;

補足

• border-start-end-radius プロパティは、border-radius プロパティと併用することができます。
• border-start-end-radius プロパティは、IE 11 以前ではサポートされていません。

さまざまな border-start-end-radius サンプルコード

基本的な例

• すべての角を同じ半径で丸くする

.element {
  border-radius: 10px;
}

• 左上の角と右下の角のみを丸くする

.element {
  border-start-end-radius: 10px;
}

• 左上の角のみを丸くする

.element {
  border-top-left-radius: 10px;
}

.element {
  border-bottom-right-radius: 10px;
}

応用的な例

• 要素の幅の割合で角丸を設定する

.element {
  border-start-end-radius: 20%;
}

.element {
  border-start-end-radius: 0 50%;
}

• グラデーションと組み合わせて角丸を強調する

.element {
  border-start-end-radius: 10px;
  background: linear-gradient(to right, #f00, #00f);
}

• 角丸と影を組み合わせて立体感を出す

.element {
  border-start-end-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

方向性と border-start-end-radius

• LTR 言語の場合

.element {
  border-start-end-radius: 10px; /* 左上の角と右下の角が丸くなる */
}

• RTL 言語の場合

.element {
  border-start-end-radius: 10px; /* 右上の角と左下の角が丸くなる */
}

• 縦書きの場合

.element {
  writing-mode: vertical-rl;
  border-start-end-radius: 10px; /* 左上の角と右下の角が丸くなる */
}

border-start-end-radius プロパティの代替方法

IE 11 以前で角丸のデザインを実現するには、以下の代替方法を使用できます。

border-radius プロパティは、すべての角を同じ半径で丸くすることができます。

.element {
  border-radius: 10px;
}

画像を使用する

角丸のデザインを画像として用意し、背景画像として設定することができます。

.element {
  background-image: url(rounded-corner.png);
}

SVG を使用する

角丸のデザインを SVG で記述し、background-image プロパティで設定することができます。

.element {
  background-image: url(rounded-corner.svg);
}

border プロパティと border-image プロパティを組み合わせて、角丸のデザインを実現することができます。

.element {
  border: 1px solid #ccc;
  border-image: url(rounded-corner.png) 10 10 10 10;
}

CSS ライブラリを使用する

border-radius プロパティを IE 11 以前でもサポートできるようにする CSS ライブラリを使用することができます。

これらの代替方法は、border-start-end-radius プロパティほど柔軟ではありませんが、IE 11 以前でも角丸のデザインを実現することができます。

どの方法を選択するかは、以下の点を考慮する必要があります。

• デザインの要件
• ブラウザのサポート状況
• 開発の容易さ

デザインの要件

デザインによっては、border-radius プロパティだけで十分な場合もあります。しかし、より複雑な角丸のデザインを実現したい場合は、他の方法を使用する必要があります。

ブラウザのサポート状況

IE 11 以前のブラウザをサポートする必要がある場合は、border-start-end-radius プロパティを使用できません。

開発の容易さ

画像や SVG を使用する方法は、比較的簡単に実装できます。しかし、border プロパティと border-image プロパティを使用する方法は、より複雑なコーディングが必要になります。

border-start-end-radius プロパティは、角丸のデザインを柔軟に設定できる便利なプロパティですが、IE 11 以前ではサポートされていません。

IE 11 以前で角丸のデザインを実現するには、上記