💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSでボーダーを付ける方法｜borderの書き方
📌
結論
border: 1px solid #ccc; で枠線を付けられます
📝 実際のコードはこちら
div { border: 1px solid #ccc; }borderの書き方
border は太さ 種類 色の3つを一括で指定します。
| 種類 | 見た目 |
|---|---|
solid | 実線 |
dashed | 破線 |
dotted | 点線 |
一辺だけ指定
border-top, border-right, border-bottom, border-left で個別指定できます。下線だけ引きたいときなどに便利です。
まとめ
・border は太さ・種類・色を一括指定
・一辺だけの指定も可能
演習で試してみよう
divに1px solid #cccのボーダーを付けてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
divに1pxの実線、色#cccのボーダーを付けてください。
詰まったらヒント
border: 1px solid #ccc;