特定のコンテンツを罫線で囲み、修飾したい場合は、次のように行います。
最初に罫線で囲みたいコンテンツを
<div>
</div>
で表してグループ化する。
この範囲を特定できるようにするため、id属性（その名まえは半角英数でなければならない）で指定する。（例：<div id=”container”>）
続いて、罫線を表示するためにスタイルシートに下記のように記述する。
div#container {border-style: solid;
border-width: 2px;
border-color: #bbffaa}
上記のものを一つにまとめて記述することも可能。
div#container {border: solid 2px #bbffaa}
罫線の内側に余白を入れたい場合は、
div#container {border: solid 2px #bbffaa;
padding: 20px}
のように記述する。
これで、上下左右に20pxの余白のある一つの表ができあがる。
なお、div#containerのタグを省略し、#container と記述しても良い。
solidは実線を表すが他にも下記のものがある。
none 罫線を表示しない
dotted 点線
dashed 破線
double 二重線
groove 立体的な線の一種
ridge 立体的な線の一種
inset 立体的な線の一種
outset 立体的な線の一種
下だけに罫線をつけたい場合は、下記のように記述する。
h3 {font-size: 0.875em;
border-bottom: solid 2px #66aa66}
border-bottom以外に、
border-top
border-right
border-left
がある。
なお、罫線で囲んだ部分の背景に色をつける場合は、
div#container {border: solid 2px #bbffaa;
padding: 20px;
background-color: #ffffff}
のように記述する。