【HTML】ボックスの枠線を変更する５つの方法

ボーダーの基本構文

ボックスの枠線を設定するためには、CSSで「border」プロパティを使います。このプロパティは3つの要素を設定します：

例えば、以下のように書きます：

border: 2px solid #000000;

この例では、幅が2px、スタイルが実線、色が黒 (#000000) の枠線が適用されます。

枠線の幅は、「border-width」プロパティを使って変更できます。このプロパティには数値で指定したり、「thin」、「medium」、「thick」などのキーワードを使うこともできます。

div {
    border-width: 5px;
}

また、幅は個別に指定することも可能です：

div {
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 5px;
    border-left-width: 10px;
}

これにより、上下の枠線が5px、左右が10pxに設定されます。

「border-style」プロパティで枠線のスタイルを変更できます。一般的なスタイルには、以下のものがあります：

例えば、次のように書けます：

div {
    border-style: dotted;
}

これで、ボックスの枠線が点線になります。

枠線の色は「border-color」プロパティで変更できます。色は色名、HEX、RGB、RGBAなどで指定可能です。

div {
    border-color: #FF5733; /* HEX */
}

また、色は個別に指定することもできます：

div {
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

このように、ボックスの各辺に異なる色を指定できます。

ボーダーの幅、スタイル、色を一度に設定するには、ショートハンド記法を使用します。例えば、次のように記述します：

div {
    border: 3px dashed blue;
}

これにより、幅が3px、スタイルが破線、色が青の枠線が設定されます。

また、順番に注意が必要です。幅、スタイル、色の順番で指定する必要があります。

以下に、HTMLとCSSを使った実際の例を示します。

<div style="border: 5px solid #00FF00;">
    このボックスの枠線は緑色の実線です。
</div>

このコードは、幅5pxの緑色の実線枠線を持つボックスを作成します。もちろん、このようにHTML内に直接スタイルを書くこともできますが、外部のCSSファイルを使用することをお勧めします。

さらに、枠線を他のプロパティと組み合わせることもできます。例えば、ボックス内に余白（padding）を追加して、枠線から内容が離れるようにすることができます。

div {
    border: 3px solid red;
    padding: 20px;
}

この場合、赤い枠線の内側に20pxの余白が追加されます。