線の色 border-color|CSS辞典|HTMLタグ・CSS

HomeCSS辞典線の色 border-color
サイト内検索

線の色 border-color

線の色 (詳細情報)
字体 border-color:★;  線の色をまとめて指定。
border-top-color:★;  線の色を上だけ指定。
border-left-color:★;  線の色を左だけ指定。
border-right-color:★;  線の色を右だけ指定。
border-bottom-color:★;  線の色を下だけ指定。
指定 ★の部分に下記の「 」内 の効果を指定していきます。
  • #RRGGBB」 R(赤)、G(緑)、B(青)の部分に2桁ずつの英数字を指定(色見本
  • #RGB」 上の方法を省略することができます。(2桁が同じ場合だけ)
     例: #aa4466 → #a46 、#3399ff → #39f
  • rgb(R,G,B)」 R(赤)、G(緑)、B(青)の部分に 0〜255 の数字を指定。
  • rgb(R%,G%,B%)」 R(赤)、G(緑)、B(青)の部分に 0〜100 の数字を指定。
  • カラーネーム」 決められているカラーネームを記入するとその色になります。
     例: red blue green yellow orange purple pink black white
border-color だけで指定すると、上下左右の余白をまとめて指定することができます。
  • 4つ指定すると上、右、下、左と指定することができます。
    例: border-color: #555 #0f6 #aa2 #00c;
  • 3つ指定すると上、左右、下と3パターン指定することができます。
    例: border-color: #555 #0f6 #aa2;
  • 2つ指定すると上下、左右と2パターン指定することができます。
    例: border-color: #555 #0f6;
  • 1つ指定すると上下左右と全部同じ指定をすることができます。
    例: border-color: #555;
効果 枠線の色を指定することができます。
例1 <div style="border-style: solid; border-color: red;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例2 <div style="border-style: double; border-color: #0000aa;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例3 <div style="border-style: groove; border-color: #d70;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例4 <div style="border-style: double; border-width: 6px; border-top-color: #d2f;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例5 <div style="border-style: solid; border-width: 10px; border-color: #fa0 #08d #080 #d6f; padding: 8px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


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


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