
Die eleganteste Methode zur Gestaltung von Innenrahmen bietet uns CSS3 mit der Regel
outline bzw.
outline-offset. Doch Achtung: die Regel
outline-offset wird nicht vom Internet Explorer interpretiert. Das betrifft alle Versionen des IEs. Der Grund dafür liegt in der mangelhaften CSS3-Unterstützung durch den IE.
img {
outline: 10px solid #8787ff;
outline-offset: -10px;
}
Die Anweisung
outline erzeugt einen äußeren Rahmen,
outline-offset mit Minuswerten verschiebt diesen nach innen. Im Internet Explorer wird stattdessen ein normaler Außenrahmen angezeigt. Das Ergebnis:
Live-Demo:
Original-Bild:

Das funktioniert auch in Verbindung mit CSS3-Transparenz:
img {
outline-width: 10px;
outline-style: solid;
outline-color:rgb(135,135,255);
outline-color: rgba(135,135,255,0.5);
outline-offset: -10px;
}
Zu beachten ist, dass auch die CSS3-Farbangabe
rgba nicht von allen Browsern unterstützt wird. Daher sollte eine alternative
rgb-Farbe vorangestellt werden.
Live-Demo:

Eine Variante für innere Rahmen, die praktisch in allen Browsern funktioniert, wird hier beschrieben:
CSS: Rahmen nach innen, transparente Rahmen innen