Hallo sobat program, bertemu lagi dengan saya Rizal dan masih tetap di website dumetschool ini. Dipembahasan kali ini kita akan bermain warna dan garis tepi atau disebut border, dan untuk judul pembahasan kali ini yaitu tentang Cara Membuat Gradient Border dengan HTML CSS.

Border merupakan garis tepi, didalam css umum kita sering menggunakan border hanya dengan 1 warna dan itu merupakan kurang begitu indah klw menurut saya. Dan disini kita akan mencoba membuat border tersebut menjadi lebih berwarna dengan menggunakan gradient color.

Bagaimana cara membuatnya ? mari kita langsung saja mencoba nya. Langkah pertama jalankan/run text-editornya kemudian langkah selanjutnya teman-teman ketik kode HTML seperti pada contoh dibawah ini :

Jika sudah simpan dengan format HTML, dan langkah selanjutnya teman-teman ketik kode CSS nya seperti pada contoh dibawah ini :

Dalam penulisan css diatas saya menggunakan variable css untuk menentukan ukuran border lalu saya menggunakan fungsi calc yang terdapat pada css. oke jika sudah silahkan disimpan dan silahkan coba dijalankan dibrowser yang teman-teman gunakan.

Jika benar maka hasilnya akan menjadi seperti pada gambar dibawah ini :

Cara Membuat Gradient Border dengan HTML CSS

Bagaimana ? sedikit lebih indah dilihat ya teman-teman. Jadi seperti itulah contoh sederhana dipembahasan kita kali ini tentang Cara Membuat Gradient Border dengan HTML CSS dan silahkan teman-teman explore lagi.

Oke kalau begitu cukup sampai disini pembahasan kita tentang Cara Membuat Gradient Border dengan HTML CSS. semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih