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

Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditambahkan ketika mendasain web. Dalam tutorial belajar CSS kali ini kita akan membahas cara penggunaan property border yang digunakan untuk membuat garis tepi pada element HTML.

---

Cara Penulisan Property border CSS

Untuk membuat 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.

Sebagai contoh, jika saya ingin membuat sebuah bingkai setebal 2 pixel, berbentuk garis normal dan berwarna merah, saya bisa menggunakan kode berikut:

div {
  border: 2px solid red;
}

Jika saya ingin membuat bingkai dengan tebal 10 pixel, berbentuk garis putus-putus dan berwarna biru, kodenya adalah:

div {
  border: 10px dotted blue;
}

Berikut kode HTML dan CSS lengkap dari kedua contoh ini:

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

Berikut contoh tampilan ke 8 jenis border ini:

solid
dotted
dashed
double
groove
ridge
inset
outset

Anda 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 juga 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:

Sekarang setiap sisi border dibuat dengan warna yang berlainan.

Selain untuk tag

, kita juga bisa menggunakan border untuk element HTML lain seperti gambar, paragraf, tabel, form, dll. Berikut contoh penggunaan border pada tag

:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.


   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.

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 dalam tutorial berikutnya: pengertian padding dan fungsi property padding dalam CSS.

---

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Sumber wk.com