CSS
境界

構文

• 境界

• border：border-border border-style border-color最初の|継承する;

• border-top：border-width border-style border-color |最初の|継承する;

• border-bottom：border-width border-style border-color |最初の|継承する;

• border-left：border-width border-styleボーダー - カラー|最初の|継承する;

• border-right：border-width border-style border-color |最初の|継承する;

• ボーダースタイル

• border-style：1-4なし|隠された|点在する| |ソリッド|ダブル|グルーブ| |インセット|始まり|最初の|継承する;

• ボーダー半径

• border-radius：1-4 length | ％/ 1-4長さ| ％|最初の|継承する;

• border-top-left-radius：長さ| ％[長さ| ％] |最初の|継承する;

• border-top-right-radius：長さ| ％[長さ| ％] |最初の|継承する;

• border-bottom-left-radius：長さ| ％[長さ| ％] |最初の|継承する;

• border-bottom-right-radius：長さ| ％[長さ| ％] |最初の|継承する;

• ボーダーイメージ

• border-image-border：border-image-repeat [border-image-width [border-image-outset]] border-image-repeat

• border-image-source：none |画像;

• border-image-slice：1-4数字|パーセント[塗りつぶし]

• border-image-repeat：1-2ストレッチ|繰り返し|ラウンド|スペース

• 国境崩壊

• 国境崩壊：分離| |最初の|継承する

備考

ボーダー半径

border-radiusプロパティでは、基本ボックスモデルの形状を変更できます。

要素の各コーナーには、そのコーナーの垂直半径と水平半径（最大8値）に対して最大2つの値を設定できます。

最初の値セットは水平半径を定義します。オプションの第2の値セットは、 '/'の前に垂直半径を定義します。値のセットが1つだけ指定された場合は、垂直半径と水平半径の両方に使用されます。

border-radius: 10px 5% / 20px 25em 30px 35em;

10 10pxは、左上と右下の水平半径です。そして、 5%は右上と左下の左の水平半径です。 '/'の後の4つの値は、左上、右上、右下および左下の垂直半径です。

多くのCSSプロパティと同様に、任意のまたはすべての可能な値に対して簡略表記を使用できます。したがって、1〜8の値を指定できます。次の略記法では、すべてのコーナーの水平および垂直半径を同じ値に設定できます。

HTML：

<div class='box'></div>

CSS：

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Border-radiusは、ボックス要素を円に変換するために最も一般的に使用されます。 border-radiusを正方形要素の長さの半分に設定すると、円形要素が作成されます。

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

border-radiusはパーセンテージを受け入れるので、border-radius値を手動で計算するのを避けるために50％を使用するのが一般的です。

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

widthプロパティとheightプロパティが等しくない場合、結果のシェイプは円ではなく楕円になります。

ブラウザ固有のborder-radiusの例：

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

ボーダースタイル

border-styleプロパティは、要素の境界線のスタイルを設定します。このプロパティは1〜4の値を持つことができます（要素のすべての側に1つの値があります）。

例：

border-style: dotted;

border-style: dotted solid double dashed;

border-styleはnoneとhidden値を持つこともできます。 <table>要素の境界の競合解消のためのhidden作業を除いて、同じ効果があります。複数の罫線を持つ<table>では、優先度が最も低いnoneはありnone （境界線が表示され、境界線が表示されます）。 hiddenていることが最も優先されます（競合の場合、境界線は表示されません）。

国境（簡体字）

ほとんどの場合、要素のすべての面に対していくつかの境界線のプロパティ（ border-width 、 border-style 、 border-color ）を定義する必要があります。

書くのではなく、

border-width: 1px;
border-style: solid;
border-color: #000;

あなたは単に書くことができます：

border: 1px solid #000;

これらの簡略表記は、要素の各辺についても利用できます： border-top 、 border-left 、 border-right 、 border-bottom 。だからあなたはできる：

border-top: 2px double #aaaaaa;

ボーダーイメージ

border-imageプロパティでは、通常の境界線スタイルの代わりにイメージを使用するように設定することができます。

border-image本質的に

• border-image-source ：使用する画像へのパス
• border-image-slice ：画像を9つの領域 （4 隅 、4 辺 、 中央 ）に分割するためのオフセットを指定しborder-image-slice 。
• border-image-repeat ：境界画像の辺と中央の画像をどのようにスケーリングするかを指定します

次の例を考えてみましょう。wheras border.pngは90x90ピクセルの画像です：

border-image: url("border.png") 30 stretch;

画像は30x30ピクセルの9つの領域に分割されます。側面は境界の隅として使用され、側面は境界の隅として使用されます。要素が30pxより大きい/広い場合、画像のこの部分が伸びます。画像の中央部分は透明になっています。

ボーダー - [左|右|上|下]

border-[left|right|top|bottom]プロパティは、要素の特定の辺に境界線を追加するために使用されます。

たとえば、要素の左側に罫線を追加する場合は、次のようにします。

#element {
    border-left: 1px solid black;
}

国境崩壊

border-collapseプロパティは、 table （およびdisplay: tableまたはinline-tableとしてdisplay: tableされる要素）にのみ適用され、表の境界線が単一の境界線に折りたたまれているのか、標準HTMLのように切り離されているのかを設定します。

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

「 表 - 国境崩壊ドキュメント」の項目も参照してください。

複数の罫線

アウトラインの使用：

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

ボックスシャドウを使う：

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

擬似要素を使う：

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

border-imageを使用して多色の枠線を作成する

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

上記の例では、5つの異なる色からなる境界線が生成されます。色はlinear-gradient定義されています（グラデーションに関する詳細はドキュメントにあります ）。 border-image-sliceプロパティの詳細については、同じページのborder-image例を参照してください。

（ 注：プレゼンテーションの目的で追加のプロパティが要素に追加されました。 ）

左ボーダーには単一の色（グラデーションの開始色）しかないのに対し、右ボーダーには単一の色（グラデーションの終わりの色）しかないことに気づいたでしょう。これは、境界線のイメージプロパティが機能するためです。まるでグラデーションがボックス全体に適用され、パディングエリアとコンテンツエリアから色がマスクされているように見えるので、境界線だけがグラデーションを持つように見えます。

どの境界線が単一の色を有するかは、勾配の定義に依存する。グラデーションがto rightグラデーションの場合、左の境界線はグラデーションの開始色になり、右の境界線は終点の色になります。 to bottomグラデーションの場合、上のボーダーはグラデーションの開始カラー、下のボーダーは終わりのカラーになります。以下はto bottom 5のカラーグラデーションの出力です。

境界線が要素の特定の辺にのみ必要な場合、border border-widthプロパティは他の通常の境界線と同様に使用できます。たとえば、以下のコードを追加すると、要素の上部にのみ境界線が生成されます。

border-width: 5px 0px 0px 0px;

border-imageプロパティを持つ要素は、 border-radius 尊重しないことに注意してください（ボーダーはカーブしません）。これは、仕様の以下のステートメントに基づいています。

ボックスの背景は境界線画像ではなく、適切な曲線にクリップされます（「背景クリップ」によって決定されます）。