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. gadgetboi says:

    pertamax dulu ah … ;))

  2. gadgetboi says:

    wah … seandainya saya bisa menerapkannya … nanti dech kalau punya domain pribadi … tak bookmark dulu ah … ^:)^

    kn ga harus domain pribadi… 😀

  3. nakjaDimande says:

    Siippp, makasih pelajaran htmlnya pagi ini Hari.

    ‘met malming yaa.. salam buat Dy

    everynight is Saturday Night For Us, Bundo… :mrgreen:

  4. jumialely says:

    Thankyouuu mas hariiii

    Selamat pagii menjelang siang

    seLamat berLibur, Bu…

    .-= jumialely´s last blog : Mengintip Gaya dan Pose mu =-.

  5. Rita Susanti says:

    Waaa, terima kasih om Harry ilmunya, bisa dipraktekkkan di mana saja kan??

    bisa dimana aja, tante… 😀

  6. kawanlama95 says:

    hmm , sering-sering aja posting seperti ini. biar kita tambah jago , kode htmlnya

    biar tambah banyak teman…

  7. dafiDRiau says:

    Ilmu tidak hanya bisa kita dapatkan di sekolah saja. tapi dimana2…

    termasuk di sini… 😀

  8. dulu saya nyari yang beginian nih 😉 makasi mas

    same-same, Mas…

    .-= Afif Logicprobe10´s last blog : Mengenal PLC =-.

  9. marsudiyanto says:

    Makin rapi makin rapi…
    Pemilihan fontnya makin diperhatikan…
    Belajar tak pernah henti!!

    beLajar tak kenaL lelah…

    Tak biji 8
    .-= marsudiyanto´s last blog : Kalau SMK Bisa, SMA Bagaimana? =-.

  10. marsudiyanto says:

    Langsung tak terapke ning rambu2 jalan…

    sumonggo, Bapak…

    .-= marsudiyanto´s last blog : Kalau SMK Bisa, SMA Bagaimana? =-.

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