Hari Mulyanto
19

Jangan Mau Tersudut

Ada kaLanya kita membutuhkan sudut untuk mempertegas suatu bentuk, tapi ada kaLanya puLa kita ingin menghiLangkan sudut untuk memberi kesan haLus, ramah dan fLeksibeL. Bagaimana cara menyiasati tampiLan html supaya tak meLulu kotak? CSS bisa membuat sudut-sudut daLam html akan tampak meLengkung (rounded corner), sahabat hanya perLu menambahkan beberapa style ke daLam kode html. Berikut contoh kode CSS nya:

Melengkung pada semua sudut
<div style="border:1px solid #000000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">Contoh teks</div>
Melengkung pada sudut kiri atas
<div style="border:1px solid #000000; border-top-left-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;">Contoh teks</div>
Melengkung pada sudut kanan atas
<div style="border:1px solid #000000; border-top-right-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;">Contoh teks</div>
Melengkung pada sudut kiri bawah
<div style="border:1px solid #000000; border-bottom-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;">Contoh teks</div>
Melengkung pada sudut kanan bawah
<div style="border:1px solid #000000; border-bottom-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px;">Contoh teks</div>

dimana angka 10px adaLah besar jari-jari lengkungan.

Tested On : Firefox 3.6.3, Chrome 4.1, Safari 3.2.3, Opera 10.53, Flock 2.5.6

Filed in: Blogging, How It Works Tags: , , , , , , , , ,

19 Responses to "Jangan Mau Tersudut"

  1. Ari says:

    hahaha… bisa aja ngajarin tips CSSnya…

    kaLau mBa Ari masak CSS gmn rasanya ya?

    .-= Ari´s last blog : Kelezatan Menu Udang Mang Engking =-.

  2. jumialely says:

    malam mas hariii

    saya baLasnya sore nih, Bu… :lol:

  3. sentil says:

    memang kalau jodoh itu ga kemana-mana. Baru aja mau cari referensi untuk buat lengjung-lengkung….ndilala…dapat ilmunya……..thx berat pak…

    aLhamdulillah bisa bermanfaat…

    .-= sentil´s last blog : Bekerja Dengan Hati =-.

  4. nDa says:

    Hmmm….(Hari mulya malas mandi)
    (maap, saia meminjam komen adik saia si hari puter & kepanjangan yg dibuat akangnya) :D

    saLah.. yang bener tuh: Hari Mulya Memang Manis…

  5. Mamah Aline says:

    dapat tutor HTML disini, walau saya gak pernah ada kemajuan mas Hari b-(

  6. Alwi says:

    Wah keren Dab ….. bisa sebagai variasi untuk menampilkan informasi penting plus pilihan border yg variatif

    iya, banyak variasinya…

    .-= Alwi´s last blog : Menggunakan Firefox dan Google Sebagai Kalkulator =-.

  7. terimakasih utk ilmu html nya ,Hari.
    walaupun tinggal copas kodenya, bunda kudu belajar dulu.

    :D sama-sama masih beLajar…

    salam
    .-= bundadontworry´s last blog : Benarkah Jeruk Bisa Meluruhkan Lemak? =-.

  8. tukangpoto says:

    Aduh kalo soal HTML gini mah saya nyerah deh kang, nggak mudeng.. :mrgreen:

  9. adin says:

    punya saya udah gini bentuknya…tapi sip lah, jadi tau kalo mau ngedit di bagian mananya… :)

Leave a Reply

Submit Comment

© 2009-2016 Hari Mulya. All rights reserved. XHTML / CSS Valid.
Your Left Brain Can Analyze It While Your Right Brain Let You Feel It