CSSボーダー

CSSで境界線を操作する方法

境界線は、パディングとマージンの間の薄いレイヤーです。境界線を編集すると、要素に画面上に周囲を描画させることができます。

これらのプロパティを使用して、境界線で作業できます。

border-style
border-color
border-width

プロパティborderこれらすべてのプロパティの省略形として使用できます。

border-radius丸みを帯びた角を作成するために使用されます。

また、画像を境界線として使用する機能もあります。これは、によって与えられる機能です。border-imageおよびその特定の個別のプロパティ：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

から始めましょうborder-style。

ボーダースタイル

ザ・border-styleプロパティを使用すると、境界線のスタイルを選択できます。使用できるオプションは次のとおりです。

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

小切手このCodepen実例の場合

スタイルのデフォルトはnone、境界線を表示するには、境界線を別のものに変更する必要があります。solidほとんどの場合、これは良い選択です。

プロパティを使用して、エッジごとに異なるスタイルを設定できます

border-top-style
border-right-style
border-bottom-style
border-left-style

またはあなたが使用することができますborder-style通常のTop-Right-Bottom-Leftの順序を使用して、それらを定義するための複数の値を使用します。

p {
  border-style: solid dotted solid dotted;
}

ボーダー幅

border-width境界線の幅を設定するために使用されます。

事前定義された値の1つを使用できます。

thin
medium（デフォルト値）
thick

または、ピクセル、em、rem、またはその他の有効な長さの値で値を表します。

例：

p {
  border-width: 2px;
}

次の4つの値を使用して、各エッジの幅（Top-Right-Bottom-Left）を個別に設定できます。

p {
  border-width: 2px 1px 2px 1px;
}

または、特定のエッジプロパティを使用できますborder-top-width、border-right-width、border-bottom-width、border-left-width。

ボーダーカラー

border-color境界線の色を設定するために使用されます。

色を設定しない場合、デフォルトでは、要素のテキストの色を使用して境界線が色付けされます。

有効な色の値をに渡すことができますborder-color。

例：

p {
  border-color: yellow;
}

次の4つの値を使用して、各エッジの色（Top-Right-Bottom-Left）を個別に設定できます。

p {
  border-color: black red yellow blue;
}

または、特定のエッジプロパティを使用できますborder-top-color、border-right-color、border-bottom-color、border-left-color。

ボーダー速記プロパティ

言及されたこれらの3つのプロパティ、border-width、border-styleそしてborder-color省略形のプロパティを使用して設定できますborder。

例：

p {
  border: 2px black solid;
}

エッジ固有のプロパティを使用することもできますborder-top、border-right、border-bottom、border-left。

例：

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

境界半径

border-radius境界に丸い角を設定するために使用されます。境界線を丸めるために使用される円の半径として使用される値を渡す必要があります。

使用法：

p {
  border-radius: 3px;
}

エッジ固有のプロパティを使用することもできますborder-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius。

画像を境界線として使用する

境界線のある非常に優れた点の1つは、画像を使用してスタイルを設定できることです。これにより、ボーダーを使って非常にクリエイティブになります。

5つのプロパティがあります。

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

と速記border-image。境界線はこの小さな章でできるように、より詳細なカバレッジが必要になるため、ここでは画像についてはあまり詳しく説明しません。私は読むことをお勧めしますCSSはborder-imageのアルマナックエントリをトリックします詳細については。

私の無料ダウンロードCSSハンドブック