CSSで色んな枠線を表現できるborder系プロパティの使い方を解説します！
CSSで枠線を作ろう！
CSSでは枠線を指定できるCSSプロパティがたくさん用意されています。
本記事で枠線に関するプロパティを学び、おしゃれな枠線を作れるようになりましょう！
CSS
プロパティborder｜枠線を一括指定
borderプロパティは枠線に関するスタイルを一括で定義できます。
borderはborder-width・border-color・border-styleを一括で指定します。
また、枠線の方向別に異なる指定をしたい場合、本記事で説明する別のプロパティを使う必要があります。
【 borderの書き方 】
セレクタ {
border: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-test {
border: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
指定できる値は本記事の指定できる枠線のスタイル(種類)を参照してください。
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-left｜左側の枠線を指定
border-leftプロパティは左側の枠線に関するスタイルを一括で定義できます。
border-leftはborder-width・border-color・border-styleを一括で指定します。
【 border-leftの書き方 】
セレクタ {
border-left: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-left-test {
border-left: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
指定できる値は本記事の指定できる枠線のスタイル(種類)を参照してください。
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-right｜右側の枠線を指定
border-rightプロパティは右側の枠線に関するスタイルを一括で定義できます。
border-rightはborder-width・border-color・border-styleを一括で指定します。
【 border-rightの書き方 】
セレクタ {
border-right: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-right-test {
border-right: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
指定できる値は本記事の指定できる枠線のスタイル(種類)を参照してください。
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-top｜上側の枠線を指定
border-topプロパティは上側の枠線に関するスタイルを一括で定義できます。
border-topはborder-width・border-color・border-styleを一括で指定します。
【 border-topの書き方 】
セレクタ {
border-top: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-top-test {
border-top: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
指定できる値は本記事の指定できる枠線のスタイル(種類)を参照してください。
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-bottom｜下側の枠線を指定
border-bottomプロパティは下側の枠線に関するスタイルを一括で定義できます。
border-bottomはborder-width・border-color・border-styleを一括で指定します。
【 border-bottomの書き方 】
セレクタ {
border-bottom: 太さ(サイズ) 色 枠線のスタイル;
}
〜 例 〜
.border-bottom-test {
border-bottom: 2px #000000 dashed; /* "dashed"は"-"点線 */
}
枠線のスタイルとは、二重線や点線など枠線の見た目の種類のことです。
指定できる値は本記事の指定できる枠線のスタイル(種類)を参照してください。
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-style｜枠線のスタイル(種類)を個別指定
border-styleの使い方
border-styleプロパティは枠線のスタイル(種類)だけを定義できます。
ここでいうスタイル(種類)とは、二重線や点線など枠線の見た目の種類のことです。
また、border-styleは、方向別に異なる指定もできます。
【 border-styleの書き方 】
〜 ①全方向を同じに指定 〜
セレクタ {
border-style: スタイル;
}
〜 ②上下・左右を別で指定 〜
セレクタ {
border-style: スタイル(上下) スタイル(左右);
}
〜 ③上・左右・下を別で指定 〜
セレクタ {
border-style: スタイル(上) スタイル(左右) スタイル(下);
}
〜 ④上・右・下・左を別で指定 〜
セレクタ {
border-style: スタイル(上) スタイル(右) スタイル(下) スタイル(左);
}
【 コード例 】
ブラウザで実行するとこんな感じです。
指定できる枠線のスタイル(種類)
枠線の
スタイルdotted｜"・"点線の枠線
枠線のスタイルdottedは"・"の点線の指定です。
【 枠線のスタイルdottedの書き方 】
〜 border-style 〜
セレクタ {
border-style: dotted;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 dotted;
}
【ブラウザの表示例】
枠線の
スタイルdashed｜"-"点線の枠線
枠線のスタイルdashedは"-"の点線の指定です。
【 枠線のスタイルdashedの書き方 】
〜 border-style 〜
セレクタ {
border-style: dashed;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 dashed;
}
【ブラウザの表示例】
枠線の
スタイルsolid｜実線の枠線
枠線のスタイルsolidは実線の指定です。
【 枠線のスタイルsolidの書き方 】
〜 border-style 〜
セレクタ {
border-style: solid;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 solid;
}
【ブラウザの表示例】
枠線の
スタイルdouble｜二重線の枠線
枠線のスタイルdoubleは二重線の指定です。
【 枠線のスタイルdoubleの書き方 】
〜 border-style 〜
セレクタ {
border-style: double;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 double;
}
【ブラウザの表示例】
枠線の
スタイルoutset｜出っ張った枠線
枠線のスタイルoutsetは出っ張ったような見た目の枠線となります。
【 枠線のスタイルoutsetの書き方 】
〜 border-style 〜
セレクタ {
border-style: outset;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 outset;
}
【ブラウザの表示例】
枠線の
スタイルinset｜凹んだ枠線
枠線のスタイルinsetは凹んだような見た目の枠線となります。
【 枠線のスタイルinsetの書き方 】
〜 border-style 〜
セレクタ {
border-style: inset;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 inset;
}
【ブラウザの表示例】
枠線の
スタイルridge｜立体的な出っ張った枠線(額縁っぽい)
枠線のスタイルridgeは立体的な枠線で、額縁のような見た目となります。
影のつき方によって出っ張って見えます。
【 枠線のスタイルridgeの書き方 】
〜 border-style 〜
セレクタ {
border-style: ridge;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 ridge;
}
【ブラウザの表示例】
枠線の
スタイルgroove｜立体的な凹んだ枠線(額縁っぽい)
枠線のスタイルgrooveは立体的な枠線で、額縁のような見た目となります。
影のつき方によって凹んで見えます。
【 枠線のスタイルgrooveの書き方 】
〜 border-style 〜
セレクタ {
border-style: groove;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 groove;
}
【ブラウザの表示例】
枠線の
スタイルnone｜枠線なし(デフォルト)
枠線のスタイルnoneは枠線なしの指定で、デフォルトの設定です。
【 枠線のスタイルnoneの書き方 】
〜 border-style 〜
セレクタ {
border-style: none;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 none;
}
【ブラウザの表示例】
枠線の
スタイルhidden｜枠線を非表示
枠線のスタイルhiddenは枠線を非表示にする指定です。
【 枠線のスタイルhiddenの書き方 】
〜 border-style 〜
セレクタ {
border-style: hidden;
}
〜 border(-left/-right/-top/-bottom) 〜
セレクタ {
border: 太さ(サイズ) 色 hidden;
}
【ブラウザの表示例】
CSS
プロパティborder-width｜枠線の太さを個別指定
border-widthプロパティは枠線の太さだけを指定できます。
また、border-widthは、方向別に異なる指定もできます。
【 border-widthの書き方 】
〜 ①全方向を同じに指定 〜
セレクタ {
border-width: 太さ;
}
〜 ②上下・左右を別で指定 〜
セレクタ {
border-width: 太さ(上下) 太さ(左右);
}
〜 ③上・左右・下を別で指定 〜
セレクタ {
border-width: 太さ(上) 太さ(左右) 太さ(下);
}
〜 ④上・右・下・左を別で指定 〜
セレクタ {
border-width: 太さ(上) 太さ(右) 太さ(下) 太さ(左);
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-color｜枠線の色を個別指定
border-colorプロパティは枠線の色だけを指定できます。
また、border-colorは、方向別に異なる指定もできます。
【 border-colorの書き方 】
〜 ①全方向を同じに指定 〜
セレクタ {
border-color: 色;
}
〜 ②上下・左右を別で指定 〜
セレクタ {
border-color: 色(上下) 色(左右);
}
〜 ③上・左右・下を別で指定 〜
セレクタ {
border-color: 色(上) 色(左右) 色(下);
}
〜 ④上・右・下・左を別で指定 〜
セレクタ {
border-color: 色(上) 色(右) 色(下) 色(左);
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
プロパティborder-radius｜枠線の角丸を指定
border-radiusプロパティは枠線の角丸を表現でき、角丸の半径を指定できます。
また、border-radiusは、方向別に異なる指定もできます。
【 border-radiusの書き方 】
〜 ①全方向を同じに指定 〜
セレクタ {
border-radius: 半径サイズ;
}
〜 ②左上┌と右下┘・左下└と右上┐を別で指定 〜
セレクタ {
border-radius: 半径サイズ(左上┌と右下┘) 半径サイズ(左下└と右上┐);
}
〜 ③左上┌・左下└と右上┐・右下┘を別で指定 〜
セレクタ {
border-radius: 半径サイズ(左上┌) 半径サイズ(左下└と右上┐) 半径サイズ(右下┘);
}
〜 ④左上┌・右上┐・右下┘・左下└を別で指定 〜
セレクタ {
border-radius: 半径サイズ(左上┌) 半径サイズ(右上┐) 半径サイズ(右下┘) 半径サイズ(左下└);
}
【 コード例 】
ブラウザで実行するとこんな感じです。
・・・な枠線、額縁みたいな枠線、画像を使った枠線とかとか！
色んな枠線が作れちゃうよ〜！