ボーダー

border

border は要素の枠線を指定するショートハンドです。border-width・border-style・border-color の 3 つを、順不同かつ一部を省略してまとめて書けます。

構文

<line-width> || <line-style> || <color>

プレビュー

プリセット
右下の角をドラッグするとサイズを変えられます

ショートハンドの内訳

border
8pxborder-width
solidborder-style
#88d1c7border-color

コード

.box {
  border: 8px solid #88d1c7;
}

コントロール

border-width8px
border-stylesolid
border-style
border-color#88d1c7

解説

省略したパーツは初期値になる

  • border-width を省略すると medium(多くのブラウザで 3px)になります。
  • border-style を省略すると none になり、枠線は表示されません。太さや色だけ指定して線が出ないときは、まずここを疑いましょう。
  • border-color を省略すると currentcolor(要素の文字色)になります。

4 辺すべてを上書きする

border は 4 辺すべてに同じ値を設定します。辺ごとに変えたいときは border-top などを後から書いて上書きします。また border は border-image も初期値にリセットする点に注意してください。