枠線

ボックスモデル モジュールでは、ボックスモデルの各セクションを説明するためにフレームとの類似性を検討しました。

3 つのフォトフレームが並んでいる。中央のフレームには、ボックスモデルのセクションが重ねて表示されています

ボーダー ボックスはボックスのフレームです。border プロパティを使用すると、考えられるほぼすべてのスタイルでフレームを作成できます。

境界線のプロパティ

個々の border プロパティを使用すると、境界のさまざまな部分にスタイルを設定できます。

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

スタイル

境界を表示するには、border-style を定義する必要があります。次のオプションから選択できます。

ridgeinsetoutsetgroove スタイルを使用すると、ブラウザは表示される 2 番目の色の境界線の色を暗くして、コントラストと奥行きを表現します。この動作はブラウザによって異なる場合があります(特に black などの暗い色の場合)。Chrome では、これらの境界スタイルは実線として表示されますが、Firefox では明るくなり、2 番目の色が暗くなります。

他の境界スタイルでもブラウザの動作が異なる可能性があるため、さまざまなブラウザでサイトをテストすることが重要です。このような違いの一般的な例として、各ブラウザが dotted スタイルと dashed スタイルをレンダリングする方法が挙げられます。

Chrome、Firefox、Safari の境界デモ。境界の表示方法の微妙な違いを示しています。
Chrome、Firefox、Safari に表示される境界。

ボックスの各側に境界スタイルを設定するには、border-top-styleborder-right-styleborder-left-styleborder-bottom-style を使用します。

ショートカット

marginpadding と同様に、border 省略形プロパティを使用して、境界のすべての部分を 1 つの宣言で定義できます。

.my-element {
    border: 1px solid red;
}

border の省略形の値の順序は、border-widthborder-styleborder-color です。

ボックスのすべての側面または個々の側面に色を設定するには、border-color を使用します。デフォルトでは、ボックスの現在のテキスト色(currentColor)が使用されます。つまり、幅などの境界プロパティのみを宣言した場合、色は明示的に設定しない限り、計算された値になります。

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

ボックスの各側に枠線の色を設定するには、border-top-colorborder-right-colorborder-left-colorborder-bottom-color を使用します。

枠線の幅は線の太さで、border-width で制御します。デフォルトの境界線の幅は medium です。ただし、スタイルを定義しない限り、このフィールドは表示されません。thinthick など、他の名前付き幅を使用することもできます。

border-width プロパティには、pxemrem% などの長さの単位も指定できます。ボックスの各側の枠線の太さを設定するには、border-top-widthborder-right-widthborder-left-widthborder-bottom-width を使用します。

論理プロパティ

論理プロパティ モジュールでは、明示的な上、右、下、左の側面ではなく、ブロックフローやインラインフローを指す方法を学習しました。

境界線にもこの機能があります。

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

この例では、.my-element のすべての側面に 2px の点線の枠線(現在のテキストの色)が定義されています。inline-end の境界は、2px として定義され、実線で赤色になります。つまり、英語などの左から右に読む言語では、赤い枠線はボックスの右側に表示されます。アラビア語などの右から左に記述する言語では、赤い枠線はボックスの左側に表示されます。

境界の論理プロパティのブラウザ サポートはさまざまであるため、使用する前にサポートを確認してください。

枠線の角丸半径

ボックスの角を丸くするには、border-radius プロパティを使用します。

.my-element {
    border-radius: 1em;
}

このショートカットを使用すると、ボックスの各コーナーに同じ境界線が追加されます。他の境界プロパティと同様に、border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius を使用して、各側の境界半径を定義できます。

各コーナーの半径を省略形で指定することもできます。この場合、左上、右上、右下、左下の順に指定します。

.my-element {
    border-radius: 1em 2em 3em 4em;
}

角に単一の値を定義すると、別のショートカットを使用します。これは、境界半径が垂直方向と水平方向の 2 つの部分に分割されているためです。つまり、border-top-left-radius: 1em を設定すると、左上の半径と左上の半径を設定します。

両方のプロパティを、次のようにコーナーごとに定義できます。

.my-element {
    border-top-left-radius: 1em 2em;
}

これにより、border-top-left-top の値は 1emborder-top-left-left の値は 2em になります。これにより、左上の枠線の半径がデフォルトの円形の半径ではなく楕円形の半径に変換されます。

これらの値は、border-radius ショートカットで定義できます。/ を使用して、標準値の後に楕円形の値を定義します。これにより、創造力を発揮して複雑な形状を作成できます。

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

画像の枠線

CSS でストロークベースのボーダーを使用する必要はありません。border-image を使用して、任意のタイプの画像を使用することもできます。この省略形プロパティを使用すると、ソース画像、画像のスライス方法、画像の幅、境界線の端からの外側への距離、境界線の繰り返し方法を設定できます。

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width プロパティは border-width に似ています。境界画像の幅を設定します。border-image-outset プロパティを使用すると、境界画像とその画像がラップされるボックスとの間の距離を設定できます。

border-image-source

border-image-source(枠線画像のソース)には、CSS グラデーションなど、有効な画像の url を指定できます。

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice プロパティは、画像を 4 つの分割線で構成された 9 つの部分にスライスできる便利なプロパティです。これは、上、右、下、左のオフセット値を定義する margin の省略形と同じように機能します。

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

デモで使用した画像。4 つのスライスが青い線で示されています

オフセット値を定義すると、画像の 9 つのセクション(4 つの角、4 つのエッジ、中央のセクション)が作成されます。角は、境界画像を持つ要素の角に適用されます。エッジは、その要素のエッジに適用されます。border-image-repeat プロパティは、エッジがスペースをどのように埋めるかを定義し、border-image-width プロパティはスライスのサイズを制御します。

最後に、fill キーワードは、スライスによって残された中央のセクションを要素の背景画像として使用するかどうかを決定します。

border-image-repeat

border-image-repeat は、枠線画像の繰り返し方法を CSS に指示します。background-repeat と同じように機能します。

  • 初期値は stretch で、可能な場合は利用可能なスペースを埋めるようにソース画像が引き伸ばされます。
  • repeat 値は、ソース画像のエッジを可能な限りタイル状に並べます。この目的のために、エッジ領域がクリップされる場合があります。
  • round 値は repeat と同じですが、画像の端の領域を切り抜いてできるだけ多く収めるのではなく、画像を伸ばして繰り返すことでシームレスな繰り返しを実現します。
  • space 値は repeat と同じですが、この値を使用すると、各エッジ領域の間にスペースが追加され、シームレスなパターンが作成されます。

理解度を確認する

国境に関する知識をテストする

デフォルトの枠線の色はどれですか?

historicColor
currentColor
white
black
.my-element {
  border: solid hotpink;
}

境界のデフォルトの幅はどれくらいですか?

1px
solid
medium

border-inline: 1px solid は...

内側に枠線を追加します。
1 行目に枠線を付ける。
左と右に枠線を追加します(ラテン語のレイアウトの場合)。
上部と下部に境界線を追加します(ラテン レイアウトの場合)。