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

19 thoughts on “Jangan Mau Tersudut

  • 30 May 2010 at 21:44
    Permalink

    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 =-.

    Reply
  • 31 May 2010 at 12:56
    Permalink

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

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

    Reply
  • 13 June 2010 at 12:56
    Permalink

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

    Reply

Leave a Reply to bundadontworry Cancel reply