[css] Podwójna ramka obrazka Opcje

[--void--]

CSS udostępnia podwójną ramkę dla obrazka (border-style: double). Problem w tym, że obie ramki są takie same (właściwie to jedna ramka, tyle że podwójna po prostu). Ja chciałbym, by ramka wewnętrzna miała parametry 10px solid black, a zewnętrzna 1px solid red. Mogę ubrać to w diva:

[HTML] pobierz, plaintext 
</div>
<div id="main_image_div">
<img src="zdjecia/1.jpg" id="main_image">
</div>
[HTML] pobierz, plaintext 

I potem:

[CSS] pobierz, plaintext 
#main_image { border: 10px solid black; }
#main_image_div { border: 1px solid red; }
[CSS] pobierz, plaintext 

Problem w tym, że szerokość tego diva (dopóki jej nie określę parametrem width) jest taka jak szerokość strony, więc i ramka wyjeżdża daleko poza obrazek w prawą stronę (do końca ekranu), a obrazki mają różną wielkość, więc nie mogę określić sztucznie szerokości diva, żeby mi się ramka nie skończyła w połowie obrazka... Jak to zrobić?

[Shili]

A może tak?

Kod

<style>
#main_image { border: 1px solid red; padding: 10px; background: black;}
</style>
</div>
<img src="zdjecia/1.jpg" id="main_image">

[--void--]

100% skuteczości Mistrzu Dzięki!