画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。
borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね?

その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。

ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。


取り合えず下記を見て下さい。

  1. 背景画像で枠線を引いたもの
  2. borderで枠線を引いたもの


1番の画像は、背景画像を使っているので枠線はどの環境で見ても同じです。
2番の画像は、borderで見せているので、ブラウザによって表示が違います。

では、やり方。

img.tenten {
 background:url(../img/dotted.gif);
 padding:1px;
}

paddingを1pxとり、背景画像をおいて上げるだけです。
その際に用意する画像がポイント。

てんてん画像

↑コレです。
ちょっと実寸だと分かり難いので、でっかい画像を。

てんてん画像拡大版

おわかりの通り、画像の裏は斜線で埋まってると思います。
応用すれば中々幅が広がると思います。