border-width線の太さ
1pxや4pxのように、数値と単位で指定します。
border
要素のまわりに境界線を引くプロパティ。太さ・線のかたち・色を、ひとつずつ選んで作ります。
遊んでみよう
この要素の境界線
CSS
.element border: 4px solid #7258e8;
値のパターン
borderの構成要素
border-style線のかたち
solidやdashedなど、線の見た目を指定します。
border-color線の色
カラーコードや色名など、CSSで使える色を指定します。
早見表
まず覚えるならこの4つ。迷ったら、最もよく使うsolidから試します。
01
solid1本の線基本02
dashed破線区切り03
dotted点線軽い印象04
double2本線強調よくある使い方
01
カードを囲む
内容のまとまりを、うすい線でひとつの箱として見せます。
border: 1px solid #d8d5cc;02
項目を区切る
下側だけに線を引くと、リストや見出しをすっきり区切れます。
border-bottom: 1px solid #d8d5cc;03
補足を目立たせる
左側を太く色づけると、ヒントや注意を目立たせられます。
border-left: 4px solid #7258e8;ポイント
線が出ない？ styleを確認。
太さと色だけを指定しても、線のかたちがnoneのままだと表示されません。まずは border: 1px solid black; と書いてみましょう。
関連するCSSも見てみよう。
border と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。