Make rounded corners with pseudo-elements: before and: after

Attention! It's all out of date, but I don’t delete the publication, so everyone knows how we were tormented in 2007 because of IE6 :-)

Task: make a frame with rounded corners with a minimum of html-code.


Everyone must have come across a corner with rounded corners. Since modern browsers (except Safari) do not support multiple backgrounds, such things have to be done with several elements nested into each other. There is a way to avoid such things now.
html code:




css code:
Set a blue background frame:
.incut{background: #dff7ff;padding: 20px;}

Four corners are hung on the elements: before and: after
.incut:before{
content:url();
background: url(i/border_tr.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin: -20px -20px 13px -20px;
}
.incut:after{
content:url();
background: url(i/border_br.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin:13px -20px -20px -20px;
}

It works in all modern browsers except ie (checked in Firefox 1-2 Opera 7-9, Safari 3). For ie, we hang the similar functionality using js (it is better to put it in a separate css file - special for ie):
.incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : '');}

Works in ie6-7. With disabled scripts, the user, ie, will see the blue background at the sidebar, i.e. nothing breaks.
')
As a result, we have a “bulletproof” inset with a minimum of html-code. Note that you can specify another image at the box, which will be its background.

Using these pseudo-elements in a similar way, one can significantly increase the semantic nature of the layout. It all depends on your imagination.

UPD:
Examples look here .