Ciao, è valido quanto indicato da Prill ma ti indico una diversa soluzione con l'uso del pseudo-elemento :after (::after) o :before (::before), o combinati entrambe, per creare ulteriore grafica senza dover usare elementi aggiuntivi come contenitore.
Posto un po' di codice con qualche esempio:
codice:<!DOCTYPE HTML> <html> <head> <title>Esempio</title> <meta charset="utf-8"> <style type="text/css"> body{ background-color:Grey; } #div1{ position:relative; border: 2px solid Red; border-radius: 25px; background-color:White; padding:10px; margin:40px; } #div1:before{ content:""; position:absolute; top:-7px; bottom:-7px; left:-7px; right:-7px; z-index:-1; background-color:Yellow; } #div2{ position:relative; border: 2px solid Grey; border-radius: 25px 0 0 0; background-color:White; padding:10px; margin:40px; } #div2:before{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; background-color:White; } #div3{ position:relative; border: 4px solid Grey; border-radius: 30px 0 30px 0; background-color:White; padding:10px; margin:40px; } #div3:before{ content:""; position:absolute; top:-4px; bottom:-4px; left:0; right:0; z-index:-1; background-color:Lime; border:solid Grey; border-width:4px 0; } #div3:after{ content:""; position:absolute; top:-10px; bottom:-10px; left:0; right:0; z-index:-2; background-color:Silver; } </style> </head> <body> <div id="div1">Lorem ipsum</div> <div id="div2">Duis aute irure dolor in reprehenderit</div> <div id="div3">Excepteur sint occaecat cupidatat non proident</div> </body> </html>


Rispondi quotando
