Rounded Corner (Sudut melengkung)

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?
Itu namanya Rounded Corner
Sebagai contoh:











Berikut cara membuatnya:

1. Tentukan bagian yang akan anda ubah menjadi melengkung
2. Misalnya bagian post maka cari kode cssnya
3. Edit seperti berikut:

Full rounded corner :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }

Rounded corner di atas :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

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

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

-webkit-border-radius-topleft: 10px;

-webkit-border-radius-topright: 10px;

-khtml-border-radius-topleft: 10px;

-khtml-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px; }

Rounded corner di kiri atas :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

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

-webkit-border-radius-topleft: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }

Rounded corner di bawah :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

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

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

-webkit-border-radius-bottomleft: 10px;

-webkit-border-radius-bottomright: 10px;

-khtml-border-radius-bottomleft: 10px;

-khtml-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px; }

Catatan:

1. Kode warna merah adalah Kode yang harus ditambahkan
2. Kode -moz-border-radius digunakan untuk FF, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.

Referensi:http://optimasi-blog.blogspot.com/
Ditulis : Sendiri