使用(X)HTML 和CSS通過div添加border-radius來設置圓角，但若是要添加特殊的圓角，或在某些老版服務器上，該方法都顯得無能爲力。
下面介紹一種JOOMLA的圓角實現方法：
爲了突破CSS邊框的限制，我們可以使用一張或多張圖片來實現邊框樣式（看起來是那樣），對於確定大小的div邊框，很容易創建大小合適的div邊框圖片，但通常，我們的div往往是根據自己的內容來改變他們的邊界，尤其是對於模版來說。
理論：
爲解決上述問題，我們用分離的圖片來做邊界的4個角，爲了確保邊界始終是連續的，這些圖片必須足夠的大以能夠覆蓋容器div的最大尺寸，我們將圖片放在4個圖層裏，重疊在一起，來保證我們的邊界框在這個最大尺寸之內。
首先，一張包含頂部，左側和左上角邊框的圖片被放在我們<div>的左上角，這張圖片尺寸大於所需容器的尺寸，甚至超出底部和右側邊緣，這個過程如動畫中半透明所示，在實踐中不可見。
接下來，一個包含底部邊緣和少部分左側邊緣角的圖片放置在左下角，上面圖片的上一層中，這張圖片在深粉色的細邊緣中呈現，可以看到，這張圖片超出了右側邊界。
第三條，一個包含右側邊界和右上角邊緣的圖片放置在右上角，置於第二個圖片上面。
最後，一個包含右下角的圖片放在容器的右下角。
切割的四個圖片如圖所示
 |  |
 |  |
Joomla中的例子
<div class="module_menu">
<div>
<div>
<div><h3>Main Menu</h3><ul class="menu"><li><!-- various menu items --></li></ul>
</div>
</div>
</div>
</div>
樣式爲
div.module_menu{background:url(../images/rounded_topleft.png)00no-repeat;padding:0;} div.module_menu div {background:url(../images/rounded_bottomleft.png)0100%no-repeat;margin:0;border:0;} div.module_menu div div{background:url(../images/rounded_topright.png)100%0no-repeat;}div.module_menu div div div {background:url(../images/rounded_bottomright.png)100%100%no-repeat;div.module_menu div div div div{background:none;}