HTMLの3つのボーダー設定方法を説明する

HTMLでボーダーを設定する3つの方法

border-width: 1px 2px 2px;
border-style: solid dashed dotted;
border-color:red green blue;
/* respectively top→left→bottom border settings*/

1. ボーダーの構成 :

border: 1px solid #fff

パラメータです。

1つ目は、ボーダーの太さ1px

2つ目は、ボーダーのスタイルで、solid solid dashed dotted dotted（互換性がなく、異なるブラウザーで同じように表示されない）です。

3つ目は、ボーダーカラーの赤で、これは英語で#f00という色をそのまま表しています。この色を16進数で表すと、rgb(255,0,0) rgbとなります。

2. 合成スタイル

/*border: 1px solid red; /*composite style*/

3. シングル設定

border-width: 1px 2px 2px 1px;
border-style: solid dashed dotted solid;
border-color:red green blue pink;
/* set top→right→bottom→left border respectively*/

これは、上のボーダー、右のボーダー、下のボーダー、左のボーダー、そして4つのボーダーを別々に表現しています

border-width: 1px 2px;
border-style: solid dashed;
border-color:red green;
/* set for top, bottom, left and right borders respectively*/

2つの値: top and bottom border left and right border

3つの値: top border left and right border bottom border (なぜこのように分かれているのか理解できません。統一されているのかもしれません)

border-top;
border-right;
border-bottom;
border-left;

しかし、仕事ではそのように割り切れないはずです。なぜなら、手間がかかるだけでなく、気持ち悪いし、魅力がないからです。

HTMLでボーダーを設定する3つの方法については、今回で終了です。HTMLでのボーダー設定について、詳しくはスクリプトハウスの過去記事を検索していただくか、引き続き下記の関連記事を閲覧してください。