Rounded Corner | Membuat Sudut menjadi Tumpul

Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).

Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok trik blogger tentang membuat rounded corner :

Full rounded corner :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Rounded corner di kiri atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}

Rounded corner di atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Rounded corner di bawah :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

Catatan :

  1. Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
  2. Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
  3. Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
  4. Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Selamat membuat rounded corner...

9 komentar untuk “Rounded Corner | Membuat Sudut menjadi Tumpul”

  1. bagus juga triksnya untuk mempercantik blog
    thx infonya mas

    BalasHapus
  2. ini nih yang di cariii . .
    hhahaa .. ..
    oh ea om ntu cara bikin up di samping tapi pake pic gimana ea???

    BalasHapus
  3. Cara makenya gimana mas...? kasih contoh.. hehe"
    maklum masih newbe...TQ

    BalasHapus
  4. kalau mau di bikin lekung di bagian postingan gmn gan ?

    BalasHapus
  5. hmmm meletakkan nya di bagian mana ya mas ? apa cuma di letakan di bagian css doang, terserah gitu ?

    BalasHapus
  6. Masih kurang jelas, terbukti msh banyak yg naya gmn. Tanggung, sebenarnya ini yg q cari, tp ikut pusing jg............

    BalasHapus
  7. makasih gan, triknya sangat membantu. ^_^

    BalasHapus
  8. mantap blog dan triknya, pertama buka tak kira masuk dasbor he he

    BalasHapus