HOWTO: circle around content in Joomla with CSS


<!-- /* the rounded line around contents*/ -->

<div class="rounded_corner">

<div class="wrap-corner">

<div class="t-edge">

<div class="l"></div>

<div class="r"></div>

</div>



<div class="l-edge">

<div class="r-edge">

<div class="panel-pane">

<jdoc:include type="component" style="html"/>

</div>

</div>

</div>



<div class="b-edge">

<div class="l"></div>

<div class="r"></div>

</div>



</div>

</div>







<code>
/* the rounded line around contents*/<br />
.t-edge, .b-edge, .l-edge, .r-edge, .wrap-corner {<br />
    position:relative;<br />
}<br />
<br />
<br />
.rounded_corner .t-edge {<br />
    background:transparent url(../images/corners/shadow-t.png) repeat-x scroll 0 top;<br />
    font-size:1px;<br />
}<br />
.rounded_corner .b-edge {<br />
    background:transparent url(../images/corners/shadow-b.png) repeat-x scroll 0 bottom;<br />
    font-size:1px;<br />
}<br />
.rounded_corner .wrap-corner .t-edge, .rounded_corner .wrap-corner .b-edge {<br />
    height:11px;<br />
}<br />
.rounded_corner .wrap-corner .b-edge .l {<br />
    background-position:0 -11px;<br />
}<br />
.rounded_corner .wrap-corner .b-edge .r {<br />
    background-position:-11px -11px;<br />
}<br />
<br />
<br />
.rounded_corner .l-edge {<br />
    background:transparent url(../images/corners/shadow-l.png) repeat-y scroll 0 0;<br />
}<br />
.rounded_corner .r-edge {<br />
    background:transparent url(../images/corners/shadow-r.png) repeat-y scroll right 0;<br />
}<br />
.rounded_corner .wrap-corner .r-edge {<br />
    padding:5px 15px;<br />
}<br />
<br />
<br />
.rounded_corner .wrap-corner .l {<br />
    left:0;<br />
}<br />
.rounded_corner .wrap-corner .r {<br />
    background-position:-11px 0;<br />
    right:0;<br />
}<br />
.rounded_corner .wrap-corner .l, .rounded_corner .wrap-corner .r {<br />
    background-image:url(../images/corners/corner-bits.png);<br />
    height:11px;<br />
    position:absolute;<br />
    top:0;<br />
    width:11px;<br />
}<br />

</code>