Dreptunghi rotunjit

Voi arata in exemplul acesta cum sa creem un dreptunghi rotunjit ca cel de mai sus.
Vom avea nevoie de urmatoarele imagini:
 
colt_stanga.gif

colt_dreapta.gif

mijloc.gif

colt_jos_stanga.gif

colt_jos_dreapta.gif
Smecheria principala este sa folosim pseudo-elementele "before" si "after". Regulile CSS folosite sunt:
blockquote {
    max-width: 253px;
    background: url(mijloc.gif) right repeat-y }
blockquote:before {
    display: block;
    line-height: 0;
    background: url(colt_dreapta.gif) top right no-repeat;
    content: url(colt_stanga.gif) }
blockquote:after {
    display: block;
    line-height: 0;
    background: url(colt_jos_dreapta.gif) bottom right no-repeat;
    content: url(colt_jos_stanga.gif) }
iar HTML este:

 
Ar trebui sa vedeti un dreptunghi cu colturile rotunjite si umbrite. Altfel, s-ar putea ca browser-ul dvs sa nu supert CSS.

Deoarece imaginea nosatra de fundal are 253px, nu putem ingadui dimensiunea mai lata de 253px pentru cam am obtine goluri.
Regula "display: block" este necesara pentru a ne asigura ca, colturile vor fi deasupra si dedesuptul continutului principal, iar nu pe prima si ultima linie.
Regula " line-height: 0" este pentru ca sa ne asiguram ca nu va ramanea spatiu la proprietatea "content".
Incepand cu CSS3 s-ar fi putut sa facem colturi rotunde si mai simplu, dar nu am fi avut si imagine de fundal. De exemplu, daca am dori ca sa avem un paragraf inconjurat cu o dunga rosie, ce are si o umbra, am fi putut folosi si urmatoarea regula: