Hallo teman-teman,kali ini kita akan belajar tentang fungsi rounded pada CSS3. Rounded adalah fungsi untuk membuat sudut objek menjadi melengkung. Dulu untuk membuat sudut objek menjadi melengkung kedalam web, biasanya diakali dengan photoshop sehingga tidak efisien. Dengan dihadirkanya fungsi untuk rounded di css3 memudahkan para developer agar tidak perlu pakai tools lain.
Oke langsung saja pada prakteknya,teman-teman bisa buat file html seperti dibawah ini.
Border-radius dengan 1 nilai
Nilai dari fungsi border-radius yang menentukan seberapa cekung sudut suatu objek. Pada contoh diatas nilainya sebesar 15px, artinya setiap sudut dicekungkan sebesar 15px;
Border-radius dengan 2 nilai
Lalu pada gambar diatas nilainya adalah 15px dan 60px. Perhitungan nilai dimulai dari kiri atas lalu kearah kanan. Jadi 15px itu untuk Kiri atas lalu dilanjutkan dengan 60px untuk kanan atas kemudian balik lagi ke 15px untuk kanan bawah dan terakhir 60px untuk kiri bawah.
Border-radius dengan 3 nilai
Untuk nilai 3 hampir sama, dimulai dari kiri atas lalu kearah kanan. Yang pertama diberi nilai 15px, lalu 10px, kemudian 100px dan yang terakhir mengikuti nilai yg kedua yaitu 10px;
Border-radius dengan 4 nilai
Dan yang terakhir adalah nilai 4, yang tentu saja tiap sudutnya diberi ukuran masing-masing dimulai sehingga lebih mudah pemahamanya.
Mudah ya teman-teman, itulah fungsi rounded pada CSS3. Selamat mencoba.