BorderはCSSの基本的なプロパティのひとつで、要素の周囲に枠線を引くという装飾としては単純なものです。しかし、上下左右の枠線に別々のスタイル・太さ・色を指定できるので、工夫すれば画像を使わなくてもちょっとしたアクセントとして十分に使えます。
また、Background-colorやBackground-imageと組み合わせると、一層の効果が望めるでしょう。最初はCSS上級者のデザインを見て真似てみるのがいいと思います。
しかし、とりあえずこのページでは画像を使わずにどこまでできるか試してみたいと思います。僕みたいに絵心のない人間にとってはアイコン一つ作るのもかなりの難業ですし。また、配色は別問題なので今回はモノクロで例を作ることにします。
Borderによる装飾の例
border-left: solid 1em #999;
padding-left: 0.5em;
Borderを太くして四角いアイコンもどきにしたものです。色は自由に変えられますが、実体はsolidなborderなので丸くしたり模様をつけたりはできません。ちゃんとしたアイコンを入れたいときはbackground-imageを使うのがよいでしょう。
border-left: dotted 5px #999;
padding: 1em;
上の例をちょっとひねって点線にしてみたものです。
border-left: solid 0.5em #CCC;
border-bottom: dashed 1px #666;
padding: 0.5em;
多くのサイトで見かけるボーダー飾りの一例です。左の四角と下の線は別の色にしても構いません。線は例のように点線にしたり、二重線にしたりできます。
border-style: solid;
border-width: 1em;
border-color: transparent #999;
padding: 0.5em;
太くしたBorderの上下の色を透明にすることで、台形を作ることができます。
border-style: solid;
border-width: 1px;
border-color: #FFF #333 #333 #FFF;
background-color: #CCC;
padding: 1em;
上と左を明るい色に、下と右を暗い色にすることで、要素全体が浮き出て見えるような効果が得られます。逆にすれば沈んでいるように見えます。こうするほうがborder-styleをoutsetにするよりも綺麗に見えるようです。
border: double 6px #FFF;
background-color: #CCC;
padding: 1em;
ちょっと反則気味ですが、二重線の色を背景と同じ色にすることで一味違った枠線を作れます。
まとめ
あまりたいした例が出せなかったですが、配色さえうまく選べはこれだけでも十分ワンポイントのアクセントになると思います。