ボーダー
border
border は要素の枠線を指定するショートハンドです。border-width・border-style・border-color の 3 つを、順不同かつ一部を省略してまとめて書けます。
構文
<line-width> || <line-style> || <color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
border8pxborder-width
solidborder-style
#88d1c7border-color
コード
.box {
border: 8px solid #88d1c7;
}コントロール
border-width8px
border-stylesolid
border-color#88d1c7
解説
省略したパーツは初期値になる
border-widthを省略するとmedium(多くのブラウザで 3px)になります。border-styleを省略するとnoneになり、枠線は表示されません。太さや色だけ指定して線が出ないときは、まずここを疑いましょう。border-colorを省略するとcurrentcolor(要素の文字色)になります。
4 辺すべてを上書きする
border は 4 辺すべてに同じ値を設定します。辺ごとに変えたいときは border-top などを後から書いて上書きします。また border は border-image も初期値にリセットする点に注意してください。