[CSS] Box con bordi arrotondati in parte non funzionante

playbasfa

[CSS] Box con bordi arrotondati in parte non funzionante

Ciao ragazzi.
Stavo provando a creare un box con gli angoli arrotondati per racchiudere il mio layout liquido, già testato e funzionante.

Volevo anzitutto impostare tramite un'apposita immagine di una semplice linea nera creare i bordi verticali sinistro e destro. Ovviamente c'è il problema che tali linee vengono sovrascritte dal contenuto del layout già esistente che voglio contornare con i suddetti bordi tondi.. Ho ovviato a sinistra impostando un margin-left di 5px, mentre a dx nonostante abbia messo margin-left:-5px il layout copre la suddetta immagine..

Il comando che non viene applicato (ovvero il margin left negativo) si trova dentro #con (che sarebbe il contenitore già pronto del mio layout liquido).
Ecco il codice:


<html>
	<head>
		<style type="text/css">
		body{
		margin:0 10%
		}
		
	{
		width:100%;
		overflow:hidden;
		background: #fcf url(Css/Layouta2liquido/layoutadueliquidocolsx.gif) 30% 0 repeat-y;
		margin-left:5px;
		margin-right:-5px;  /* questo non viene applicato*/
		}
		
		#c1{
		width:30%;
		float:left
		}
		
		#c2{
		width:70%;
		float:left
		}
		
		#perbordidx{
		background:url(8.gif) top right repeat-y
		}
	
		
		p{
		margin: 0.7em
		}
		
		#piep{
		margin:0;
		}
		
		#perbordisx{
		background:url(8.gif) top left repeat-y
		}
		
		</style>
		
		
<div id="perbordisx">
	<div id="perbordidx"> 	
				<div id="con">
					<div id="c1"> <p> cioa 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 </p> </div>
					<div id="c2"> <p> Colonna 2 </p> </div> 
				</div>	
	</div> 
</div>


</head>
</html>