Cara Menggunakan Fungsi border-radius Pada CSS 3

Berjumpa kembali dengan saya di tips dan trik Source Code Aplikasi, di kesempatan kali ini kita akan belajar mengenai Cara Menggunakan Fungsi border-radius Pada CSS 3 pastinya teman – teman telah tahu bukan apa yang dimaksud border-radius..?? Bagus, saya akan jelaskan sedikit mengenai border-radius dimana di pada css kita perlu tahu manfaat – manfaat yang menghasilkan output tertentu disebabkan wajib tahu dari beberapa manfaat css tersebut. Bagi manfaat border-radius biasanya di gunakan bagi merancang output seperti, oval, bundar dan lain sebagainya. Di studi case kali ini kita akan memainkan border-radius sesuai keinginan kita. Di pada pengetikannya sama seperti memanggil padding dan margin namun perlu pengetahuan lagi bagi border-radius, di bawah ini teman – teman dapat lihat cara pengetikannya dan hasil outputnya

• border-radius:20px; (karenanya hasilnya akan menjadi oval setiap sudutnya yaitu di mulai dari kiri atas, kanan atas, kanan bawah dan kiri bawah)

• border-radius:20px 50px; (karenanya hasilnya akan menjadi 20px bagi kiri atas dan kanan bawah lalu 50px kanan atas dan kiri bawah)

Nah di pada artikel Cara Menggunakan Fungsi border-radius Pada CSS 3 ini kita pun akan belajar cara menuliskan secara terpisah hampir sama dengan padding dan margin namun border-radius ini dimulai dari kiri atas karenanya dapat di tuliskan seperti ini

• border-top-left-radius (karenanya hasilnya hanya kiri atas)




• border-top-right-radius (karenanya hasilnya hanya kanan atas)
  





• border-bottom-left-radius (karenanya hasilnya hanya kiri bawah)
  





• border-bottom-right-radius (karenanya hasilnya hanya kanan bawah)
  

Nah seandainya saya menuliskan script seperti di bawah ini dan nilainya saya bedakan agar teman – teman dapat lihat perbedaannya

<style> 
*{padding: 0; margin: 0}
div {
    margin: 50px auto;
    width: 300px;
    height: 200px;
    border: 2px solid;
    padding: 10px;
    background: #dddddd;
    border-top-left-radius: 20px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 80px;
}
</style>

Dapat di lihat di gambar di atas ini, seperti yang saya bilang bagi pengetikkannya sama seperti padding dan margin namun pendefinisiannya agak panjang, ini bermanfaat seandainya teman – teman ingin menentukan satu titik saja yaitu left-top, right-top, bottom-right, atau bottom-left. Oke, usai telah pembahasan mengenai Cara Menggunakan Fungsi border-radius Pada CSS 3 seandainya ingin ditanyakan atau masih bingung teman – teman dapat post komentarnya di bawah ini.

Terimakasih dan hingga jumpa, Semoga bermanfaat 🙂

Sumber https://kursuswebsite.org