Kebanyakan dari webiste maupun blog yang beredar internet menerapkan style box pada setiap layout css-nya. Dengan demikian suatu keharusan bagi setiap web designer untuk memanfaatkan dan mempercantik website/blog saat menggunakan style box tersebut. Nah salah satu cara untuk membuat style box layout ini nampak lebih menarik dan menambahkan nilai estetika pada design web adalah dengan menggunakan teknik border radius . Pada umumnya code css yang digunakan untuk membuat rounded corners adalah

view sourceprint?

1.-moz-border-radius: 3px;

Berasal dari Mozilla dan digunakan pada Firefox

view sourceprint?

1.-khtml-border-radius: 3px;

Berasal dari Linux dan digunakan pada Konqueror

view sourceprint?

1.-webkit-border-radius: 3px;

Berasal dari Safari dan digunakan pada untuk mac dan windows

view sourceprint?

1.border-radius: 3px;

Dan code diatas hanya merupakan spesifikasi dari standart CSS3. Berikut ini beberapa contoh penerapannya:

Image border

Code CSS:

view sourceprint?

1.img.border {

2.-moz-border-radius-bottomleft:5px;

3.-moz-border-radius-bottomright:5px;

4.-moz-border-radius-topleft:5px;

5.-moz-border-radius-topright:5px;

6.background-color:#EEEEEE;

7.border:1px solid #DDDDDD;

8.padding:5px; }

Code HTML:

view sourceprint?

1.<img class="border" src="thumb.jpg" alt="" width="247" height="92" />

Demo
Source

Full Rounded Corners

Code CSS:

view sourceprint?

01.rounded {

02.-moz-border-radius-bottomleft:5px;

03.-moz-border-radius-bottomright:5px;

04.-moz-border-radius-topleft:5px;

05.-moz-border-radius-topright:5px;

06.background-color:#666666;

07.color:#FFFFFF;

08.font-weight:bold;

09.padding:10px; }

Code HTML:

view sourceprint?

1.<div class="rounded"&gt; Text </div>

Demo
Source

Border Rounded Corners

Code CSS:

view sourceprint?

01.blockquote {

02.-moz-border-radius-bottomleft:10px;

03.-moz-border-radius-bottomright:10px;

04.-moz-border-radius-topleft:10px;

05.-moz-border-radius-topright:10px;

06.background-color:#F2F2F2;

07.border:2px solid #555555;

08.color:#555555;

09.font-size:140%;

10.margin:1em 20px;

11.padding:10px;

12.text-align:left; }

Code HTML:

view sourceprint?

1.<blockquote>text</blockquote>

Demo
Source

Half Rounded Corners

Code CSS:

view sourceprint?

01.green {

02.-moz-border-radius-bottomright:8px;

03.-moz-border-radius-topleft:8px;

04.background-color:#CCFF99;

05.border:2px solid #66CC00;

06.color:#666666;

07.font-size:120%;

08.font-weight:bold;

09.padding:8px 10px; }

Code HTML:

view sourceprint?

1.<p class="green">Text</p>

Demo
Source

Code di atas hanya berberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius.