Per finire, dobbiamo imporre alla cornice di rimanere sempre in primo piano. Per farlo ci serviamo di z-index:
#top, #right, #bottom, #left { z-index: 9999; }

L'esempio base è così concluso, e per amor di completezza riportiamo una versione compattata del CSS fin qui visto:
#top, #right, #bottom, #left {
background: #ff0000;
position: fixed;
z-index: 9999;
}
#left, #right {
top: 0; bottom: 0;
width: 20px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
left: 0; right: 0;
height: 20px;
}
#top { top: 0; }
#bottom { bottom: 0; }

Background trasparenti

Adesso che abbiamo la nostra cornice funzionante possiamo sbizzarrirci. Ad esempio niente ci vieta (compatibilità cross-browser a parte) di usare delle png trasparenti come immagini di sfondo: basta creare una png semitrasparente di 1px x 1px e applicarla come sfondo:
#top, #right, #bottom, #left { background: url(bg.png) repeat; }

In questo modo la cornice risulta in trasparenza sul resto della pagina (esempio).
C'è il problema, però, che sugli angoli i div si incrociano e la trasparenza perde di uniformità: per risolvere occorre rimettere mano al CSS e traslare ogni div nell'opportuna direzione per una lunghezza pari alla dimensione scelta (nel nostro caso 20px):
#top { right: 20px; }
#right { bottom: 20px; }
#bottom { left: 20px; }
#left { top: 20px; }



Ecco il risultato finale.

Fade-away

Sempre utilizzando lo stesso markup, possiamo anche implementare un effetto sfumatura alla pagina. Per farlo necessitiamo di una png alta quanto la dimensione della cornice, con un gradiente che dal colore di sfondo passa alla trasparenza (salviamola come bg1.png). Come in figura:
Figura 3 - Gradiente Bianco-Trasparente

Salviamo una copia simmetrica orizzontalmente della stessa png, così da avere la sfumatura in senso opposto (salviamola come bg2.png). La prima la applicheremo a #top e la seconda a #bottom. Per questo effetto, #left e #right non sono necessari:
#top { background: url(bg1.png) repeat-x; }
#bottom { background: url(bg2.png) repeat-x; }
#left, #right { display:none; }

Dimensioniamo la cornice in modo che sia alta quanto la lunghezza del gradiente nell'immagine di sfondo (se è poco spessa l'effetto sarà minimo, ma attenzione che una cornice troppo alta potrebbe rendere il vostro sito inusabile):
#top, #bottom { height: 50px; }

Oppure, di nuovo, per selezionare tutte le parole marcate da <strong> dentro ai paragrafi:
h2:target + p > strong { background: #000000; color: #ffffff; }

Et voilà: l'esempio finale all'opera.
Conclusioni

La resa cross-browser di questa tecnica è ottima, tranne che per un unico neo: Internet Explorer 6. La soluzione migliore, visto che su questa versione del browser non funziona, è quella di disabilitare la cornice con i commenti condizionali:
[if lte IE 6]
>#top, #bottom, #left, #right { display: none; }
<![endif]

Per il resto Firefox, Safari, Opera, e IE 7 rendono il tutto più che bene. Ovviamente queste considerazioni valgono per l'esempio di base: se siete intenzionati ad utilizzare le png trasparenti dovrete tenere in considerazione il fatto che queste ultime non sono ben supportate ovunque.
Tutti gli esempi e le immagini usate sono disponibili per il download.