inserire una sfumatura attorno ad un contenitore

[moonba]

ciao a tutti,avrei bisogno di un consiglio,come creo nel modo ideale questa sfumatura al contenitore considerando che è inserito con le percentuali?

[simotenax]

direi creando delle gif per poi posizionarle adeguatamente..
solo nello standard css3 verranno implementate le sfumature dei bordi

[moonba]

si ok grazie,fin qui c'ero.
questo è il mio css e il relativo html.
il mio problema è che se nel div a destra tolgo il contenuto non si mi vede la sfumatura in pieno del div sfumacontent.come posso risolvere al meglio?
[code]
.boxleft
{
float: left;
margin-left: 4%;
width: 55%;

}

.boxright
{
background-image: none;
float: left;
width: 40%;

}

.content
{
background-image: url(imgl2/bgcontent2.gif);
background-repeat: repeat-y;
clear: both;
height: 100%;
margin: 1% 15% 5% 15% ;
margin-bottom: 5%;
margin-left: 15%;
margin-right: 15%;
margin-top: 1%;

}
.sfumacontent
{
background-image: url(imgl2/bottomcontent.gif);
background-position: top left;
background-repeat: repeat-x;
clear: left;
float: left;
margin-left: 19px;
width: 96%;

}
<div class="content">
<div class="boxleft">
<table class="Tabellacontenuti">
<thead>
<tr>
<th class="contenuti">
voce1</th>
<th class="contenuti">
voce2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="special">contenuti</td>
<td class="voce2">654774</td>
</tr>
<tr>
<td class="special">contenuti</td>
<td class="voce2">999999</td>
</tr>
<tr>
<td class="special">contenuti</td>
<td class="voce2">45456</td>
</tr>
<tr>
<td class="special">contenuti</td>
<td class="voce2">46577</td>
</tr>
<tr>
<td class="special">contenuti</td>
<td class="voce2">122344</td>
</tr>
<tr>
<td class="special">contenuti</td>
<td class="voce2">234</td>
</tr>
</tbody>
</table>
</div>
<div class="boxright">

</div>
<div class="sfumacontent">
</div>
</div>
[code]

[moonba]

scusate riposto il codice in modo che sia più leggibile:

.boxleft 
{
	float: left;
	margin-left: 4%;
	width: 55%;

}

.boxright 
{
	background-image: none;
	float: left;
	width: 40%;

}

.content 
{
	background-image: url(imgl2/bgcontent2.gif);
	background-repeat: repeat-y;
	clear: both;
	height: 100%;
	margin: 1% 15% 5% 15% ;
	margin-bottom: 5%;
	margin-left: 15%;
	margin-right: 15%;
	margin-top: 1%;

}
.sfumacontent 
{
	background-image: url(imgl2/bottomcontent.gif);
	background-position: top left;
	background-repeat: repeat-x;
	clear: left;
	float: left;
	margin-left: 19px;
	width: 96%;

}
 <div class="content">
        <div class="boxleft">
                         </div>
        <div class="boxright">
		
		</div>
		  <div class="sfumacontent"> </div>
       
    </div>