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

Tabel Konten

1. BAB 1: Perkenalan CSS Border Radius 
2. BAB 2: Dua Metode Pemecahan Sisi 
3. BAB 3: Penerapan Radius Asimetris 
4. Bingung? Ingin Cara yang Lebih Praktis? 

BAB 1: Perkenalan CSS Border Radius 

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

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:

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:

Bingung? Ingin Cara yang Lebih Praktis? 

Gunakan generator CSS Border Radius » klik di sini