--- title: border-end-end-radius slug: Web/CSS/border-end-end-radius tags: - CSS - CSS Logical Property - CSS Property - Experimental - Reference - border-end-end-radius - 'recipe:css-property' - writing modes translation_of: Web/CSS/border-end-end-radius ---

{{CSSRef}}

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

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

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

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

このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-bottom-right-radius")}} プロパティに対応します。

構文

値

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

公式定義

{{CSSInfo}}

形式文法

{{CSSSyntax}}

例

縦書きの時の境界の丸め

HTML

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

CSS

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

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

結果

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

仕様書

仕様書 状態 備考
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}} {{Spec2("CSS Logical Properties")}} Initial definition.

ブラウザーの互換性

{{Compat("css.properties.border-end-end-radius")}}

関連情報