Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Sudut Melengkung pada Box Model dengan CSS. mungkin pembahasan kali ini tentang sudut melengkung sudah banyak ya teman-teman digoogle namun pembahasan kali ini sangat cocok untuk pemula. Jadi untuk membuat sudut melengkung pada box model hanya dengan menggunakan property border-radius pada css. untuk lebih jelasnya Oke langsung saja kita mulai ya teman-teman.

Pertama teman-teman jalankan/run text-editor yang teman-teman gunakan, disini saya menggunakan sublime-text. kemudian teman-teman ketik/copy script HTML dibawah ini :

Jika sudah, langkah selanjutnya teman-teman tambahkan lagi style/CSSnya dan letakan diantara tag head pada html. contoh hasil script lengkapnya akan menjadi seperti dibawah ini :

Jika sudah silahkan teman-teman simpan dengan nama box.html atau terserah teman-teman. Kemudian langkah selanjutnya silahkan coba teman-teman jalankan/run box.html kedalam browser yang teman-teman gunakan maka hasil awalnya akan terlihat seperti dibawah ini :

cara-membuat-sudut-melengkung-pada-box-model-dengan-css

Terlihat pada gambar diatas ya teman-teman bahwa yang saya kasih panah itu merupakan sebuah sudut namun masih terlalu tajam ya teman-teman. Lalu bagaimana agar sudut tersebut tidak terlalu tajam seperti gambar diatas ? . oke caranya teman-teman hanya perlu menambahkan property border-radius pada style css nya. Untuk menambahkannya teman-teman bisa lihat seperti dibawah ini :

Oke, kita sudah menambahkannya. Silahkan coba teman-teman refresh/jalankan kembali dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan seperti pada gambar dibawah ini :

cara-membuat-sudut-melengkung-pada-box-model-dengan-css

Bagaimana teman-teman ? cukup mudah bukan Cara Membuat Sudut Melengkung pada Box Model dengan CSS.  pembahasan diatas adalah sebagai acuan contoh dasarnya saja dan untuk pengembangannya silahkan teman-teman coba sendiri sesuai kreativitas yang teman-teman miliki.

Cukup sekian pembahasan kali ini  tentang Cara Membuat Sudut Melengkung pada Box Model dengan CSS semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih