CSS Border radius - Membuat Efek Tumpul pada Sudut-Sudut Area

BAB 1: Perkenalan CSS Border Radius

Berikut ini adalah kode CSS dasar untuk membuat efek tumpul pada sudut-sudut area:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Nilai 10px adalah ukuran radius ketumpulan sudut. Meskipun di sini Saya meletakkan properti -webkit-border-radius, -moz-border-radius dan border-radius sekaligus, namun pada dasarnya mereka semua mempunyai tugas yang sama persis. Setiap peramban mempunyai prefiks border radius tersendiri:

• -webkit-border-radius: Properti ini milik Safari dan Chrome. Jika Safari/Chrome tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -webkit-border-radius.
• -moz-border-radius: Properti ini milik Mozilla Firefox. Jika Firefox tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -moz-border-radius.
• border-radius: Ini adalah standar W3C. Suatu saat semua peramban harus bisa membaca properti ini.

BAB 2: Dua Metode Pemecahan Sisi

Berikut ini adalah hasil-hasil tampilan penumpulan sudut pada semua peramban yang telah disebutkan di atas berdasarkan deklarasi-deklarasi yang diletakkan di dalam area. Ada satu hal penting yang mungkin akan terjadi di sini. Kemungkinan besar kalian tidak akan melihat efek-efek penumpulan sudut pada satu atau dua pembagian tipe peramban dalam daftar area di bawah ini, karena di sini Saya hanya menerapkan satu jenis prefiks pada masing-masing tipe peramban saja.
Misalnya begini: Jika saat ini kamu sedang melihat halaman ini dengan peramban Mozilla Firefox, maka kemungkinan kamu tidak akan melihat efek penumpulan sudut pada grup Chrome dan Safari. Untuk melihat efek penumpulan sudut pada grup Chrome dan Safari, maka kamu harus melihat halaman ini dengan peramban tersebut.

Spesifikasi W3C, Opera 10.5+
Metode 1: Dominasi Value	Metode 2: Dominasi Properti
border-radius: 20px 20px 20px 20px; border-radius: 20px 0 0 0; border-radius: 0 20px 0 0; border-radius: 0 0 20px 0; border-radius: 0 0 0 20px;	border-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;

Mozilla Firefox
Metode 1: Dominasi Value	Metode 2: Dominasi Properti
-moz-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 0 0 0; -moz-border-radius: 0 20px 0 0; -moz-border-radius: 0 0 20px 0; -moz-border-radius: 0 0 0 20px;	-moz-border-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px;

Safari & Chrome
Metode 1: Dominasi Value	Metode 2: Dominasi Properti
-webkit-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 0 0 0; -webkit-border-radius: 0 20px 0 0; -webkit-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 0 20px;	-webkit-border-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px;

BAB 3: Penerapan Radius Asimetris

Untuk menerapkan hasil tampilan radius asimetris pada sudut-sudut area, digunakanlah logika sumbu-X dan sumbu-Y seperti ini:

CSS Border Radius Asimetris

Radius vertikal diartikan sebagai sumbu-Y, sedangkan radius horizontal diartikan sebagai sumbu-X. Karena di sini kita akan menerapkan dua value sekaligus, maka cara yang paling tepat untuk menerapkannya adalah dengan menggunakan metode dominasi properti seperti ini:

div {
  -webkit-border-top-left-radius:(x) (y);
  -moz-border-radius-topleft:(x) (y);
  border-top-left-radius:(x) (y);
}

Jika kode (x) diubah menjadi 50px dan (y) menjadi 20px maka akan menghasilkan penampilan area seperti ini:

-webkit-border-top-left-radius: 50px 20px;
-moz-border-radius-topleft: 50px 20px;
border-top-left-radius: 50px 20px;

Bingung? Ingin Cara yang Lebih Praktis?

Gunakan generator CSS Border Radius » klik di sini