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-widthborder-right-widthborder-bottom-widthborder-left-width

ボーダーカラー

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

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

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

例:

p {
  border-color: yellow;
}

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

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

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

ボーダー速記プロパティ

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

例:

p {
  border: 2px black solid;
}

エッジ固有のプロパティを使用することもできますborder-topborder-rightborder-bottomborder-left

例:

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

境界半径

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

使用法:

p {
  border-radius: 3px;
}

エッジ固有のプロパティを使用することもできますborder-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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ハンドブック


その他のCSSチュートリアル: