Mengenal border lengkung

Kali ini saya akan membahas bagaimana membuat border lengkung tapi efek ini hanya bisa di lihat di browser firefox dan google chrome, border lengkung ini bisa di aplikasikan di blog sobat biar ga monoton dengan border-border lainnya biar nambah variatif dalam mendesain blog sobat, nih saya kasih contohnya.

contoh dengan border biasa :
Memakai border biasa
contoh dengan border lengkung :
Memakai border lengkung
Tertarik mau membuatnya?

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 :
Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah

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}
Kalau mau ambil code diatas klik view plain nanti akan keluar popup window copy kodenya dari sana
Maka ketika sobat blogger memakai tag blockquote maka hasilnya akan seperti ini :
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

Efek border lengkung in hanya bia dilihat di firefox dan google chrome

post signature

28 comments:

  1. Pertamaxxxx,.....berkat bocoran si empunya,.........
    Thank's for to night,bro....
    Bro baik hati,......
    semoga amal nya di lipat gandakan d i bulan puasa ini,...amin!

    ReplyDelete
  2. Pertamaxxxxxx... itu lengkung-nya di pinggir gitu unix banguet ..sebenarnya dari dulu udah sy tunggu.. mau di curi kode na ngga tegaxxx..kakkakak

    ReplyDelete
  3. Pertamaxxxxxx... praktekin ah.. tanks ya!

    ReplyDelete
  4. Duh,,kok bisa2nya jadi ketiga gini???

    ReplyDelete
  5. eh..ke empat dink..sekarang aku nomor limaaxx...
    horeee...masuk 5 besar,..

    Mamih.Jovie masuk 5 besar lhoo...

    ReplyDelete
  6. aku berarti 6 besar ya....!!!

    ReplyDelete
  7. jadi melengkung gitu ya.. bagus sich...

    ReplyDelete
  8. @ googleholic > sama-sama bro
    @ 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

    ReplyDelete
  9. q coba praktekin dulu ya

    ReplyDelete
  10. aduuuh..daku tertarik banget.tapi kok maseh binun sih. walah otak gw error dah...

    ReplyDelete
  11. dohhh bro..bro..ide loe kagak ade matinya yah..hehehe..

    bener2 salut saya..hehehe..ada titisannya kang jaloe nie..hehehe..

    kaborrrr...

    ReplyDelete
  12. harus di coba nih mas...tapi nggak sekarang, maih capek baru selesai ngajar met wiken

    ReplyDelete
  13. wah... apalagi nih border lengkung???

    ReplyDelete
  14. Terima kasih tipsnya. Saya akan coba praktekkan.

    ReplyDelete
  15. Saya baru tahu nih, kalo bisa bikin border melengkung kaya gini. Saya bookmark dulu mas, mungkin besok saya udah aplikasiin cara ini.

    ReplyDelete
  16. Nice, infonya bermanfaat banget. Sudah saya coba terapkan, dan berhasil! Thanks.

    ReplyDelete
  17. ini yang sayta tunggu2 :D
    walaupun agak telat, gpp deh..

    klo gini kan ga perlu pke gambar klo mau buat border lengkung..

    ReplyDelete
  18. terima kasih infonya, aku bisa belajar dengan sangat mudah!

    ReplyDelete
  19. better use the image, but if u think that all reader use mozilla or chrome its no problem.

    thanks for share bro

    ReplyDelete
  20. wah...keren banget ini tutorial nya!

    ReplyDelete
  21. ini yang aku cari... sip. berhasil

    ReplyDelete
  22. kayaknya bisa diterapka. dengan melengkung memang kelihatan lebih bagus

    ReplyDelete
  23. memang disayangkan kode css itu cuma kompatibel pada beberapa browser saja, padahal bagus untuk mempercantik tampilan.
    cara alternatifnya bisa pake gambar koq.

    ReplyDelete
  24. thanks mas subagya... mau nerapin di blog saya dulu kang :)

    ReplyDelete