Fungsi Rounded pada CSS3

Hallo teman-teman,kali ini kita akan belajar mengenai fungsi rounded pada CSS3. Rounded yakni guna bagi merancang sudut objek menjadi melengkung. Dulu bagi merancang sudut objek menjadi melengkung kedalam web, biasanya diakali dengan photoshop sehingga tak efisien. Dengan dihadirkanya guna bagi rounded di css3 mempermudah para developer agar tak perlu gunakan tools lain.

Oke seketika saja di prakteknya,teman-teman dapat bikin file html seperti dibawah ini.

Border-radius dengan 1 nilai

       

Nilai dari guna border-radius yang menentukan seberapa cekung sudut suatu objek. Di contoh diatas nilainya sebesar 15px, artinya setiap sudut dicekungkan sebesar 15px;

Border-radius dengan 2 nilai

     

Lalu di gambar diatas nilainya yakni 15px dan 60px. Perhitungan nilai dimulai dari kiri atas lalu kearah kanan. Jadi 15px itu bagi Kiri atas lalu dilanjutkan dengan 60px bagi kanan atas kemudian balik lagi ke 15px bagi kanan bawah dan terakhir 60px bagi kiri bawah.

Border-radius dengan 3 nilai

     

Bagi nilai 3 hampir sama, dimulai dari kiri atas lalu kearah kanan. Yang pertama-tama diberi nilai 15px, lalu 10px, kemudian 100px dan yang terakhir mengikuti nilai yg kedua yaitu 10px;

Border-radius dengan 4 nilai

    

Dan yang terakhir yakni nilai 4, yang tentu saja tiap sudutnya diberi ukuran masing-masing dimulai sehingga lebih gampang pemahamanya.

Gampang ya teman-teman, demikianlah fungsi rounded pada CSS3. Selamat mencoba.

Sumber https://kursuswebsite.org