recursal/MDN huggingface dataset:
border-right-style
==================

**`border-right-style`** は CSS のプロパティで、要素の右側の境界線 (`border`) の形状を設定します。

試してみましょう
--------

**メモ:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

構文
--


```css
/\* キーワード値 \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/\* グローバル値 \*/
border-right-style: inherit;
border-right-style: initial;
border-right-style: revert;
border-right-style: unset;
```


`border-right-style` プロパティは、 `border-style` プロパティで利用できるキーワードのうちの一つで指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

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

例
-

### 境界の形状

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* 表の外見を定義 \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style の例のクラス \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-style |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* その他の形状に関する境界のプロパティ: `border-bottom-style`, `border-left-style`, `border-top-style`, `border-style`
* その他の右側の境界に関するプロパティ: `border-right`, `border-right-color`, `border-right-width`
border-inline-end-color
=======================

**`border-inline-end-color`** は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color` の何れかに対応し、どれに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

試してみましょう
--------

構文
--


```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

/\* グローバル値 \*/
border-inline-end-color: inherit;
border-inline-end-color: initial;
border-inline-end-color: revert;
border-inline-end-color: unset;
```


関連するプロパティとしては、 `border-block-start-color`、`border-block-end-color`、`border-inline-start-color` が要素の他の境界色を定義します。

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

### 値

`<'color'>`

境界の色です。 `color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-inline-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-color |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このプロパティは `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color` のうちの 1 つに対応づけられます
* `writing-mode`、`direction`、`text-orientation`
ID セレクター
========

CSS の **ID セレクター** (ID selector) は、 `id` 属性の値に基づいて要素と一致します。選択される要素の `id` 属性は、セレクターで指定した値と完全一致していなければなりません。


```css
/\* id="demo" のついた要素 \*/
#demo {
  border: red 2px solid;
}
```

構文
--


```css
#id\_value { スタイルプロパティ }
```


なお、これは次の`属性セレクター`と等価です (ただし、詳細度は異なります)。


```css
[id=id\_value] { スタイルプロパティ }
```

例
-

### CSS


```css
#identified {
  background-color: skyblue;
}
```

### HTML


```html
<div id="identified">これは特別な ID がついています！</div>
<div>これは単なる普通の div です。</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS セレクター
* CSS の学習: セレクター
font-variant-position
=====================

**`font-variant-position`** は CSS のプロパティで、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。

文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 `<sub>` と `<sup>` 要素で使用されます。


```css
/\* キーワード値 \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/\* グローバル値 \*/
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: unset;
```


これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。

これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。

構文
--

`font-variant-position` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

### 値

`normal`

上付き文字および下付き文字の字体の代替を無効にします。

`sub`

下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。

`super`

上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

font-variant-position =   
  normal  |  
  sub     |  
  super     
  
```

例
-

### 上付きおよび下付き形の設定

#### HTML


```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```


#### CSS


```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-position-prop |

### ブラウザーの互換性

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
CSS 段組みレイアウト
============

**CSS 段組みレイアウト**は CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。

基本的な例
-----

以下の例では、 `column-count` プロパティをコンテナーのクラスの要素に適用しています。 `column-count` の値が `3` なので、内容物は同じ寸法の 3 つの段に並べられます。

断片化との関係
-------

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 断片化仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

リファレンス
------

### 段組みレイアウトのプロパティ

* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
### 関連する CSS 断片化のプロパティ

* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
ガイド
---

段組みの基本概念

段組みレイアウト仕様の概要です。

段のスタイル付け

段間罫と段間の空間の使い方です。

段抜きと段の均衡

すべての段にまたがる要素の作り方と、段を埋める方法の制御です。

段組みでのはみ出しの扱い

アイテムが段をあふれたときに起こることと、段内の内容物が多すぎてコンテナーに収まらない場合に起こることです。

段組みにおける内容の分割の扱い

分割の仕様とどこで内容を区切るかの制御方法です。

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |

関連情報
----

他の CSS レイアウト技術には以下のようなものがあります。

* CSS フレックスボックスレイアウト (CSS フレックスボックス)
* CSS グリッドレイアウト
margin-right
============

**`margin-right`** は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

試してみましょう
--------

隣り合う二つのボックスの垂直マージンは融合することがあります。これは*マージンの相殺*と呼ばれています。

構文
--


```css
/\* <length> 値 \*/
margin-right: 20px; /\* 絶対的な寸法 \*/
margin-right: 1em; /\* 文字の寸法からの相対 \*/
margin-right: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

/\* キーワード値 \*/
margin-right: auto;

/\* グローバル値 \*/
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;
```


`margin-right` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

マージンの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。

`auto`

右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。

| `display` の値 | `float` の値 | `position` の値 | `auto` の計算値 | コメント |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *任意* | `static` または `relative` | `0` | インラインレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *任意* | `static` または `relative` | `0`。ただし `margin-left` と `margin-right` が共に `auto` であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 | ブロックレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` または `right` | `static` または `relative` | `0` | ブロックレイアウトモード (浮動要素) |
| *すべての* `table-*`*、ただし* `table-caption` *を除く* | *任意* | *任意* | `0` | 内部の `table-*` 要素にはマージンがない。代わりに `border-spacing` を使用のこと |
| *任意、ただし* `flex`, `inline-flex`, `table-*` *を除く* | *任意* | *`fixed`* または `absolute` | `0`。ただし `margin-left` と `margin-right` が共に `auto` 出逢った場合を除く。この場合、利用可能な `width` の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 | 絶対位置指定レイアウトモード |
| `flex`, `inline-flex` | *任意* | *任意* | `0`。ただし、水平方向に正の余白がある場合を除く。この場合、 `auto` を指定したすべてのマージンに均等に分配される。 | フレックスボックスレイアウトモード |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-caption`, `table`, `inline-table` 以外の表の `display` 種別を除くすべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

margin-right =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### ピクセル数とパーセント値を使用した右マージンの設定


```css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `margin-top`, `margin-bottom`, `margin-left` と `margin` 一括指定
* 対応付けられる論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`
border-left-width
=================

**`border-left-width`** は CSS のプロパティで、要素の左側の境界の幅を設定します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* <length> 値 \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/\* グローバル値 \*/
border-left-width: inherit;
border-left-width: initial;
border-left-width: revert;
border-left-width: unset;
```

### 値

`<line-width>`

明示的な負の値ではない `<length>` またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。

* `thin`
* `medium`
* `thick`


**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0` |
| アニメーションの種類 | length |

形式文法
----
```

border-left-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### 境界線の太さの比較

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他の境界の太さに関する CSS プロパティ: `border-top-width`, `border-right-width`, `border-bottom-width`, `border-width`
* 他の左の境界に関する CSS プロパティ: `border`, `border-left`, `border-left-style`, `border-left-color`
text-decoration-line
====================

**`text-decoration-line`** は CSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

試してみましょう
--------

複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使用したほうが便利かもしれません。

構文
--


```css
/\* 単一のキーワード \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* 複数のキーワード \*/
text-decoration-line: underline overline; /\* 2 つの装飾線 \*/
text-decoration-line: overline underline line-through; /\* 複数の装飾線 \*/

/\* グローバル値 \*/
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: unset;
```


`text-decoration-line` プロパティは `none` または以下のリストにある **1 つ以上の**空白で区切られた値を指定します。

### 値

`none`

テキストの装飾を行いません。

`underline`

テキストの各行に下線を引きます。

`overline`

テキストの各行の上線を引きます。

`line-through`

テキストの各行の中央を貫く線を引きます。

`blink` 
非推奨

テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は**非推奨**であり、 CSS アニメーションに取って代わりました。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-decoration-line =   
  none                                                |  
  [ underline || overline || line-through || blink ]    
  
```

例
-

### 基本的な例


```html
<p class="wavy">こちらのテキストには赤い波線の下線が付いています。</p>
<p class="both">このテキストには上線と下線がついています。</p>
```



```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-property |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使った方が便利かもしれません。
mask-border-source
==================

**`mask-border-source`** は CSS のプロパティで、要素のマスク境界を生成するのに使われる元の画像を設定します。

`mask-border-slice` プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。

構文
--


```css
/\* キーワード値 \*/
mask-border-source: none;

/\* <image> 値 \*/
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

/\* グローバル値 \*/
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: unset;
```

### 値

`none`

マスク境界は使用されません。

`<image>`

マスク境界に使用する画像への参照です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-border-source =   
  none     |  
  <image>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのソースを定義する役割を果たすことになります。


```css
mask-border-source: url(image.jpg);
```


Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-source` — に接頭辞つきで対応しています。


```css
-webkit-mask-box-image-source: url(image.jpg);
```


**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-source |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-width`
border-top-right-radius
=======================

**`border-top-right-radius`** は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸) を指定することで、要素の右上の角を丸めます。

試してみましょう
--------

丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。

![border-top-right-radius.png](/ja/docs/Web/CSS/border-top-right-radius/border-top-right-radius.png)

画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 `background-clip` プロパティの値で定義されます。

**メモ:** このプロパティの値が `border-top-right-radius` プロパティの後の `border-radius` 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文
--


```css
/\* 角を円にする \*/
/\* border-top-right-radius: 半径 \*/
border-top-right-radius: 3px;

/\* 角を楕円にする \*/
/\* border-top-right-radius: 水平 垂直 \*/
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/\* グローバル値 \*/
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: unset;
```


値 1 つで指定する場合:

* 値は `<length>` または `<percentage>` であり、境界の角に使用する円の半径を示します。

値 2 つで指定する場合:

* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の水平方向の半長軸を示します。
* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の垂直方向の半長軸を示します。
### 値

`<length-percentage>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-top-right-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### Arc of a circle

単一の `<length>` 値を指定すると、円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 楕円の弧

2 つの異なる `<length>` 値を指定すると、楕円の弧を生成します。
```

<div></div>
```



```css
div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセントで半径を指定した正方形の要素

正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```

<div></div>
```



```css
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセントで半径を指定した正方形ではない要素

正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円の弧を生成します。
```

<div></div>
```



```css
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-radius |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `border-radius` 一括指定プロパティ
* `border-bottom-right-radius`、`border-bottom-left-radius`、`border-top-left-radius`
border-bottom
=============

**`border-bottom`** は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。

試してみましょう
--------

他の一括指定プロパティと同様に、 `border-bottom` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・


```css
border-bottom-style: dotted;
border-bottom: thick green;
```


・・・は、実際には以下と同じです・・・


```css
border-bottom-style: dotted;
border-bottom: none thick green;
```


・・・そして、 `border-bottom` の前で設定された `border-bottom-style` の値は無視されます。 `border-bottom-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `border-bottom-color`
* `border-bottom-style`
* `border-bottom-width`
構文
--


```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

/\* グローバル値 \*/
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: unset;
```


一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、 1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

`border-bottom-width` を参照してください。

`<br-style>`

`border-bottom-style` を参照してください。

`<color>`

`border-bottom-color` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-bottom-width`: `medium`
* `border-bottom-style`: `none`
* `border-bottom-color`: `currentcolor`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
* `border-bottom-style`: 指定通り
* `border-bottom-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-color`: 色
* `border-bottom-style`: 離散値
* `border-bottom-width`: length
 |

形式文法
----
```

border-bottom =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

例
-

### 下の境界の適用

#### HTML


```html
<div>このボックスには下側に境界線があります。</div>
```


#### CSS


```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `border`
* `border-block`
* `outline`
zoom
====

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`zoom`** は CSS の標準外のプロパティで、要素の拡大率を制御するために使用することができます。できれば、このプロパティの代わりに `transform: scale()` を使用してください。ただし、 CSS 座標変換とは異なり、 `zoom` は要素のレイアウト時の大きさに影響します。


```css
/\* キーワード値 \*/
zoom: normal;
zoom: reset;

/\* <percentage> 値 \*/
zoom: 50%;
zoom: 200%;

/\* <number> 値 \*/
zoom: 1.1;
zoom: 0.7;

/\* グローバル値 \*/
zoom: inherit;
zoom: initial;
zoom: unset;
```

構文
--

### 値

`normal`

要素を通常のサイズでレンダリングします。

`reset` 
Non-standard

ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで `Ctrl`-`-` または `Ctrl`+`+` のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみ対応しています。

`<percentage>`

ズーム率です。 `100%` と `normal` は等価です。 `100%` よりも大きな値はズームイン、 `100%`よりも小さな値はズームアウトします。

`<number>`

ズーム率です。対応するパーセンテージ (`1.0` = `100%` = `normal`) に相当します。 `1.0` よりも大きな値はズームイン、 `1.0` よりも小さな値はズームアウトします。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 最初の例

#### HTML


```html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
```


#### CSS


```css
p.small {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.big {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}
```


#### 結果

### 2 番目の例

#### HTML


```html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
```


#### CSS


```css
div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}
```


#### 結果

仕様書
---

標準には含まれていません。このプロパティは Internet Explorer を起源としています。 Apple は Safari CSS Referenceで説明しています。マイクロソフトの Rossen Atanassov は GitHub に非公式の仕様案を公開しています。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS-Tricks' CSS Almanac の `zoom` の記事
* Bug 390936: Implement Internet Explorer `zoom` property for CSS on the Firefox issue tracker Bugzilla