CSS: border のサンプル(1)

・枠線 (border) のサンプル。
  border は div 以外のタグでも同じように使えます。

枠線の種類

border: (線の太さ) (線の種類) (線の色);
div1_1
border: 1px solid #666;


div1_2
border: 1px solid #33f;


div1_3: 太い線
border: 3px solid #f99;


div2_1: 破線
border: 2px dotted #99f;


div2_2: 2重線
border: 3px double #99f;


div3_1: 背景色も付ける
border: 1px solid #999;
background: #eee;

div3_2
border: 2px solid #99c;
background: #ddf;

枠の太さ、色

線の太さ、種類、色を個別に指定する例。
border-width: (線の太さ);
border-style: (線の種類);
border-color: (線の色);
div11
border-width: 1px 3px 5px 7px; /* 上,右,下,左 */
border-color: #999;
border-style: solid;
div12
border-width: 0 0 2px 15px;
border-color: #55a;
border-style: solid;
div13
border-width: 1px 7px; /* 上下, 左右 */

div15 それぞれの辺の色を変える。
border-top: 10px solid #eef;
border-left: 10px solid #eef;
border-right: 10px solid #cce;
border-bottom: 10px solid #cce;
background: #ddf;

border-radius

border-radius は角を丸くします。
div31
border-radius: 12px;
border: 2px solid #99c;
background: #ddf;
div32
border-radius: 0 16px 0 0;
左上, 右上, 右下, 左下の順に個別に指定できます。

(2009-2024/03)

◎ ノート
・MDN: border
・MDN: border-radius

◎ 昔話
・border-radius, box-shadow は IE8 など古いブラウザで対応しませんでした。
  (2017) 現在は気にせず。
inserted by FC2 system