Kalau sobat sudah mengenal properties CSS untuk mengaplikasikan tag properties border lengkung ini sangat mudah, cukup menambahkan :
-moz-border-radius: npx
Nilai n merupakan nilai kelengkungan bordernya
Turunan properties border lengkung ini ada 4 :
* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright
Saya contohkan mengaplikasikannya menggunakan tag <div>
<div style="-moz-border-radius-topleft:12px;-moz-border-radius-bottomright:12px;border:1px solid black;background-color:#c0c0c0;padding:6px;">Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah </div>
Maka akan hasilnya akan seperti :
Di atas hanya sebagian contoh penggunaan dari -moz-border-radius kalau sobat sudah pandai dalam CSS maka bisa di terapkan juga di properties border pada bagian style sheet CSS blog sobat, ok saya contohkan mengaplikaskannya ke dalam properties border blockquote, saya akan mengunakan tag blockquote pada contoh ini :
.post blockquote { margin : 15px 15px 15px 0px; padding :30px 10px 10px 10px; clear : both; list-style-type : none; background : transparent url(http://lh4.ggpht.com/jaloee/SJnxszef6II/AAAAAAAACX4/etpucC5BrdM/paku.png) no-repeat 50% 5px; border-top : 1px solid #cccccc; border-right : 2px solid #000000; border-bottom : 3px solid #000000; border-left : 1px solid #eeeeee; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; } .post blockquote p{ margin:.75em 0}
Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat
Sekarang tergantung sobat blogger mau di aplikasikan kemana, "Think Out The BOX", daya kreatif sobat di perlukan untuk bisa memakai properties -moz-border-radius- ini. Kalau pengen mengenal border lengkung ini lebih jauh silahkan ke sini
Pertamaxxxx,.....berkat bocoran si empunya,.........
ReplyDeleteThank's for to night,bro....
Bro baik hati,......
semoga amal nya di lipat gandakan d i bulan puasa ini,...amin!
Pertamaxxxxxx... itu lengkung-nya di pinggir gitu unix banguet ..sebenarnya dari dulu udah sy tunggu.. mau di curi kode na ngga tegaxxx..kakkakak
ReplyDeletePertamaxxxxxx... praktekin ah.. tanks ya!
ReplyDeleteDuh,,kok bisa2nya jadi ketiga gini???
ReplyDeleteeh..ke empat dink..sekarang aku nomor limaaxx...
ReplyDeletehoreee...masuk 5 besar,..
Mamih.Jovie masuk 5 besar lhoo...
aku berarti 6 besar ya....!!!
ReplyDeletejadi melengkung gitu ya.. bagus sich...
ReplyDelete@ googleholic > sama-sama bro
ReplyDelete@ jaloee > saya yang kebanyakan nyuri kode akang :p i like Ctrl + U
@ rida > seeep silahkan
@ jovie > wekekekekke kasihan deh lo
@ oeoes > seep selamat kang masuk 6 besar wekekeke
@ malapu > yups tapi harus makai browser ff
q coba praktekin dulu ya
ReplyDeleteblockquotenya ku copy yach.....
ReplyDeleteaduuuh..daku tertarik banget.tapi kok maseh binun sih. walah otak gw error dah...
ReplyDeletedohhh bro..bro..ide loe kagak ade matinya yah..hehehe..
ReplyDeletebener2 salut saya..hehehe..ada titisannya kang jaloe nie..hehehe..
kaborrrr...
harus di coba nih mas...tapi nggak sekarang, maih capek baru selesai ngajar met wiken
ReplyDeletewah... apalagi nih border lengkung???
ReplyDeleteTerima kasih tipsnya. Saya akan coba praktekkan.
ReplyDeleteSaya baru tahu nih, kalo bisa bikin border melengkung kaya gini. Saya bookmark dulu mas, mungkin besok saya udah aplikasiin cara ini.
ReplyDeleteNice, infonya bermanfaat banget. Sudah saya coba terapkan, dan berhasil! Thanks.
ReplyDeleteini yang sayta tunggu2 :D
ReplyDeletewalaupun agak telat, gpp deh..
klo gini kan ga perlu pke gambar klo mau buat border lengkung..
terima kasih infonya, aku bisa belajar dengan sangat mudah!
ReplyDeletebetter use the image, but if u think that all reader use mozilla or chrome its no problem.
ReplyDeletethanks for share bro
wah...keren banget ini tutorial nya!
ReplyDeleteWah baru tahu ni, thanks infonya...
ReplyDeleteini yang aku cari... sip. berhasil
ReplyDeletekeren .... !!!!
ReplyDeletewah harus banyak blajar di blog ini
ReplyDeletekayaknya bisa diterapka. dengan melengkung memang kelihatan lebih bagus
ReplyDeletememang disayangkan kode css itu cuma kompatibel pada beberapa browser saja, padahal bagus untuk mempercantik tampilan.
ReplyDeletecara alternatifnya bisa pake gambar koq.
thanks mas subagya... mau nerapin di blog saya dulu kang :)
ReplyDelete