You must enable Javascript in your browser to run or open this site.

Garis Lengkung Border Radius

Lagi lagi hal ini berhubungan dengan browser sobat. Tentang CSS ini ada beberapa browser yang support dan ada yang tidak, contohnya yang support seperti model dibawah ini.

Firefox Opera Google Chrome Safari

Saya sarankan sobat untuk memakai salah satu browser - browser diatas agar bisa melihat indahnya CSS ini. Nah, gambar di atas internet explorer tidak ada (tidak mendukung atau support) untuk diperankan kepada CSS ini.

Berikut adalah kode dalam setiap masing masing browser.

Browser
CSS Code Lengkung (Versi 1)
Mozilla Firefox

-moz-border-radius-topleft:7px;
Safari 3

-webkit-border-radius-topleft:7px;
Opera 10.5

-o-border-radius-topleft: 7px;
Chrome

border-radius-topleft: 7px;

Keterangan :
Kode Kuning adalah kode yang mengartikan ukuran Lengkung.
Kode Biru adalah kode yang mengartikan pojok atau sudut bagianmana yang mau di lengkungkan, bisa diubah menjadi : topright, bottomleft, dan bottomright atau bisa juga jika ingin semua melengkung sama, lepas kode topright, bottomleft, bottomright, dan topleft.

Berikut Hasil dari penelitian diatas.

<div style="border:1px solid #000; border-radius:10px; padding:10px;"></div>

Semoga bermanfaat ya sob :)

7 comments

  1. sedikit koreksi css yg anda gunakan tidak jalan di google chrome saya sob, jika ingin lebih mudah boleh menggunakan tool di http://be4rt.com/#Border-Radius

    BalasHapus
  2. Oke, tetapi diwebsite itu saya tidak bisa menulis apa pun sob..

    BalasHapus
  3. o iya lupa, yg d frontpagenya mang sengaja aq buat tool aj, yg laen aq simpan d blakang he he, http://be4rt.com/art

    BalasHapus
  4. be4art : Ouuhhhhhh oke saya kunjungi lagi.
    BRI Jakarta : Iya sob, thanks untuk mampir

    BalasHapus
  5. horeee..cba lagi...
    yang komen kok sepi..gak seperti yg lain sampe ratusan...

    BalasHapus
  6. To yudee : soalnya ini postingan lama sob, ane baru sadar blogwalking penting pas akhir akhir, sungguh kecewa :((

    BalasHapus