border-end-start-radius

border-end-start-radiusCSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向書字方向に依存せずにスタイルを構築する際に便利です。

/* <length> 値 */
/* 値1つの場合は角を円にする */
border-end-start-radius: 10px;  
border-end-start-radius: 1em;   

/* 値2つの場合は角を楕円にする */
border-end-start-radius: 1em 2em;

/* グローバル値 */
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: unset;

このプロパティは、要素の block-end と inline-start の間の角に影響します。すなわち、書字方向が horizontal-tbltr の方向であれば、 border-bottom-left-radius プロパティに対応します。

構文

<length-percentage>
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の <length> データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。

公式定義

初期値0
適用対象all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.。 ::first-letter にも適用されます。
継承なし
パーセンテージrefer to the corresponding dimension of the border box
計算値2つの絶対的な length 又は <percentage>
アニメーションの種類length または percentage, calc();

形式文法

<length-percentage>{1,2}

where
<length-percentage> = <length> | <percentage>

縦書きの時の境界の丸め

HTML

<div>
  <p class="exampleText">Example</p>
</div>

CSS

div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}

結果

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
border-end-start-radius の定義
編集者草案 Initial definition.

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-end-start-radiusChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報