線の太さ border-width|CSS辞典|HTMLタグ・CSS

HomeCSS辞典線の太さ border-width
サイト内検索

線の太さ border-width

線の太さ (詳細情報)
字体 border-width:★;  線の太さをまとめて指定。
border-top-width:★;  線の太さを上だけ指定。
border-left-width:★;  線の太さを左だけ指定。
border-right-width:★;  線の太さを右だけ指定。
border-bottom-width:★;  線の太さを下だけ指定。
指定 ★の部分に下記の「 」内 の効果を指定していきます。
  • 数字px」 数字で枠線の太さを指定します。(px:ピクセルのみ)
  • thin」 細い線を指定する。
  • medium」 細い線と太い線の中間の線を指定する。
  • thick」 太い線を指定する。
border-width だけで指定すると、上下左右の余白をまとめて指定することができます。
  • 4つ指定すると上、右、下、左と指定することができます。
    例: border-width: 5px 10px 4px 8px;
  • 3つ指定すると上、左右、下と3パターン指定することができます。
    例: border-width: 10px 20px 5px;
  • 2つ指定すると上下、左右と2パターン指定することができます。
    例: border-width: 10px 20px;
  • 1つ指定すると上下左右と全部同じ指定をすることができます。
    例: border-width: 15px;
効果 ボックスの枠線の太さを指定することができる。
例1 <div style="border-style: solid; border-width: 1px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例2 <div style="border-style: double; border-width: 3px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例3 <div style="border-style: groove; border-width: 8px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例4 <div style="border-style: dotted; border-width: 6px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例5 <div style="border-style: solid; border-left-width: 30px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例6 <div style="border-style: solid; border-width: 1px 12px; text-align: center; padding: 8px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


練習用書き込みフォーム(サンプル表示)


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング