Пунктирная рамка для картинки

Вам никогда не хотелось сделать пунктирную рамку для картинки, не залезая при этом в Photoshop? Наверняка хотелось.

Но ведь этоже так просто, скажете вы, зачем об этом писать если есть {border:1px dotted #000000;}; ! К сожалению браузеры по разному отображают это простое css-правило, поэтому оно не всегда подходит.

Есть как минимум два элегантных способа решения “проблемы”. Давайте посмотрим.

1. Картинка в контейнере.

Для достижения желаемого эффекта нужно поместить картинку в блочный контейнер, например в p. А для этого контейнера в свою очередь нужно задать повторяющимся фоном вот эту картинку и padding:1px;

CSS для p будет выглядеть так:

p {
    background: url('/images/dot.gif') repeat;
    padding:1px;
}

Единственная проблема, которая может возникнуть это если у картинки есть прозрачность. Тогда для самого img нужно прописать белый фон, чтобы скрыть фон контейнера под картинкой:

img {
    background: #FFFFFF;
}

Просто, правда? Пример видно в начале.

2. Работаем с самой картинкой.

В этом случае background нужно прописывать для img, и ему же задавать padding.

img {
    background: url('/images/dot.gif') repeat;
    padding:1px;
}

Есть две вещи, о которых нужно помнить, используя этот способ.

• Не использовать картинки с прозрачностью
• padding для img в Интернет Эксплорер 6 будет работать только в Standards Compliance Mode

Про более ранние версии я вобще промолчу.

А как делаете вы?