HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

ボーダー

borderプロパティ

要素の4辺のボーダーに対し、色、太さ、スタイルを一括指定します。

  • 初期値

    各プロパティに準ずる

  • 継承

    不可

  • 適用できる要素

    全要素

パターン1

4辺のボーダーについて太さ2px、スタイルを「solid」、カラーコード「#00c」で一括指定している例です。

CSSコード例

border: 2px solid #00c;

表示例:


パターン2

4辺のボーダーに値を指定した後に、top(上部)のボーダーだけ別のCSSを当てる場合の例です。

CSSコード例

border: 3px dashed gray;
border-top: 1px solid #ccc;

表示例:


パターン3

4辺のボーダーに対し個別に値を指定したい場合、次のように設定することもできます。

CSSコード例

border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: none;
border-left: 1px solid #c00;

表示例: