Tutorial Belajar CSS: Cara Membuat Garis Tepi pada HTML (border)

Posted on

Mendesain garis tepi (border) yakni sebuah diantara efek tampilan yang benar-benar sering ditambahkan ketika mendasain web. Di panduan belajar CSS kali ini kita akan membahas cara penggunaan property border yang digunakan untuk membangun garis tepi di element HTML.


Cara Penulisan Property border CSS

Untuk membangun garis tepi dengan CSS, kita menggunakan property border. Property ini membutuhkan 3 nilai: tebal border, style border, dan warna border. Penulisan ketiga nilai ini dipisahkan dengan spasi.

Selaku contoh, kalau saya ingin membangun sebuah bingkai setebal 2 pixel, berbentuk garis normal dan berwarna merah, saya dapat menggunakan kode berikut:

Seandainya saya ingin membangun bingkai dengan tebal 10 pixel, berbentuk garis putus-putus dan berwarna biru, kodenya ialah:

Berikut kode HTML dan CSS komplit dari kedua contoh ini:

Di 2 contoh penyusunan border diatas, saya hanya menggunakan 2 jenis style border, yakni solid dan dotted. Sesungguhnya terdapat 8 jenis style border, yakni: solid, dotted, dashed, double, groove, ridge, inset dan outset.

Berikut contoh tampilan ke 8 jenis border ini:

Rekan rekan dapat abaikan sementara property CSS lain seperti float dan margin, karena akan kita pelajari nantinya.


Mengatur Border untuk Setiap Sisi

Cara penulisan border seperti yang kita pelajari diatas, akan menampilkan bingkai untuk semua sisi. Namun CSS pun membolehkan kita untuk mengatur sisi mana saja yang akan diberi bingkai, apakah atas (top), right (kanan), bawah (bottom) atau kiri (left).

Untuk keperluan ini ini kita menggunakan property border-top, border-right, border-bottom, dan border-left.

Berikut contohnya:

Kini setiap sisi border dikerjakan dengan warna yang berlainan.

Selain untuk tag <div>, kita pun dapat menggunakan border untuk element HTML lain seperti gambar, paragraf, tabel, form, dll. Berikut contoh pemakaian border di tag <p>:

Tampilannya sesuai dengan apa yang kita harapkan. Namun, perhatikan bahwa teks paragraf ini seolah-olah menempel ke sisi border.

Bagaimana caranya agar terdapat sedikit spasi antara border dengan teks? Inilah yang akan kita bahas di panduan berikutnya: pengertian padding dan fungsi property padding dalam CSS.


eBook CSS Uncover Duniailkom

Seandainya rekan-rekan ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/