MEMBUAT SUDUT TUMPUL/ROUNDED CORNER

Bagaimana membuat sudut blog menjadi tumpul? ok, kita bincangkan di sini. Membuat sudut-sudut blog menjadi tumpul sangatlah mudah, kita hanya menambahkan beberapa kode ke bagian edit HTML blog. Dan sudut-sudut tumpul dalam blog itu dinamakan "rounded corner". Pada postingan kali ini kita bahas bagaimana membuat sudut tumpul tanpa gambar.
Ok, kita langsung ke pokok bahasan...

Full Rounded Corner

background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;

Rounded Corner Kiri Atas

background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
-khtml-border-radius-topleft: 15px;
border-top-left-radius: 15px;

- Untuk Rounded Corner kanan atas tinggal mengganti kode topleft menjadi topright.
- Untuk Rounded Corner kiri bawah tinggal mengganti kode topleft menjadi bottomleft.
- Untuk Rounded Corner kanan bawah tinggal mengganti kode topleft menjadi bottomright.

Rounded Corner Atas

background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topleft: 15px;
-webkit-border-radius-topright: 15px;
-khtml-border-radius-topleft: 15px;
-khtml-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;

Rounded Corner Bawah

background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomright: 15px;
-khtml-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomright: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; 

- Untuk warna background dan warna border bisa sobat sesuaikan dengan selera.
- Semakin besar nilai ( 15px ) maka semakin tumpul sudut tersebut.

Selamat mencoba......