Cara membuat sudut melengkung di blog

14 Cara membuat sudut melengkung di blog

Cara membuat sudut melengkung di blog
Selamat malam sobat mas uwah, sepulangnya ngaji saya kok kepikiran Cara membuat sudut melengkung di blog itu gimana ya contohnya kaya gini:

Nah setelah mondar-mandir tanya sana sini akhirnya nemu juga dan saya sudah coba n berhasil, trik Sudut melengkung ini bisa diterapkan di sidebar, content, atau footer. cara membuatnya kita hanya membutuhkan sedikit kode yang akan ditambah kan pada CSS tamplate kita. mau tahu kode nya seperti apa? berikut ini kode yang harus ditambahkan tersebut:

Moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
Moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
Moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
Moz-border-radius-topright => ini untuk garis melengkung kanan atas
Moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas

Nah untuk membuat sudut nya melengkung anda harus menambahkan nilai pada ujung kode tersebut, ini untuk menentukan seberapa melengkungkah sudut yang kita mau. berikut ini cara penambahannya.

-moz-border-radius:10px;

10px tersebut itu lah nilai lengkung yang akan di tambahkan. nilainya tidaklah mutlak seperti itu. anda bisa merubahnya dengan nilai yang lain. tergantung keperluan anda. setelah nilai tersebut sudah di tentukan anda tinggal memasukkannya pada kode CSS template yang ingin anda berikan sudut melengkung. disini saya akan mengambil contoh garis melengkung kiri bawah dan kanan bawah pada footer, berikut ini caranya:

#footer{
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
background:#005094;
}

Kode tersebut hasil nya lebih kurang seperti gambar di atas atau pada footer blog ini. semoga artikel ini bermanfaat untuk anda semua dan jangan lupa kembali lagi untuk membaca update terupdate saya setiap hari nya ya. salam sukses.... Jika mau pake toolsnya bisa anda pakain disini

Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih

Taufik Nurrohman :: Tapi ada beberapa lagi yang kurang, soalnya embel-embel -moz itu hanya berfungsi untuk browser mozila firefox saja. Ada lagi yang lain seperti -webkit-border-radius untuk browser Safari (kalo nggak salah) atau border-radius saja untuk standarnya.; July 5, 2011 at 7:11 PM
Mas uwah :: Wew,, kapa tulisanya dipertebal sob,, heheh!! iya btul,, mungkin sobat bisa berkreasi sndiri; July 5, 2011 at 7:23 PM
Naufal Aminur Rahman :: wuihhh klo ada rounded corner nya kok jadi keren y :D; July 5, 2011 at 7:35 PM
Mas uwah :: @Naufal: yups mas,, tpi tergantung peronalnua juga sih ada yg suka ada jga yg nggak,,; July 6, 2011 at 6:19 AM
Tips dan Trik Blog dan Komputer :: lebih mudahnya menggunakan tools ini : CSS Border Radius Generator; July 6, 2011 at 9:43 PM
Mas uwah :: @Tips dan Trik Blog: thnkyu gan ane update dah postingnya!!; July 7, 2011 at 5:54 AM
Anonymous :: met kenal mas...heheh; October 13, 2011 at 7:50 AM
Medicine Of Herbal :: thx buad sharingnya mas...heheheh; October 13, 2011 at 7:51 AM
nature-pills :: ijin praktekin mas....hehehe; October 13, 2011 at 7:51 AM
mainelyequal :: boleh z praktek tapi asal jgn jadi malpraktek...joke; October 13, 2011 at 7:52 AM
Mas uwah :: @SuwandiChen13 : oke met kenal juga; October 17, 2011 at 4:46 AM
Mas uwah :: @Medicine Of Herbal : oke brooo; October 17, 2011 at 4:47 AM
Mas uwah :: @nature-pills : monggo .. heheheh bemner kata maas mainelyequal asal jngna mal praktek...xixixix; October 17, 2011 at 4:48 AM
Lanonadio :: alhamdulilah udah saya coba dan berhasil tq ya gan; March 3, 2013 at 6:19 AM