CSS Borders dan Cara Menggunakan CSS Borders

Dalam desain web tidak menutup kemungkinan kita memberikan border/garis pembatas pada blok/bagian /elemen tertentu. Properti border memungkinkan kita untuk menentukan bagaimana border untuk sebuah kotak yang mewakili elemen akan terlihat.

Ada tiga properti border yang dapat diatur yaitu border-style, border-width dan border-color.

  1. border-style digunakan untuk menentukan apakah border berupa garis solid, garis putus-putus (dashed line), garis ganda (double line), atau nilai-nilai lainnya.
  2. border-width digunakan untuk menentukan lebar/tebal border.
  3. border-color digunakan untuk menentukan warna border.

Cara Menggunakan CSS Border Style

Properti border-style menentukan apakah border berupa garis solid, garis putus-putus (dashed line), garis ganda (double line), atau nilai-nilai lainnya.

Berikut ini nilai-nilai dari properti border-style yang dapat kita gunakan.

  • none − Tidak ada perbatasan. (Setara dengan lebar perbatasan: 0;)
  • solid − Border adalah garis solid tunggal.
  • dotted − Border berupa serangkaian titik-titik.
  • dashed − Border berupa garis putus-putus.
  • double − Border berupa 2 garis solid.
  • groove − Border tampak seperti diukir ke dalam halaman.
  • ridge − Border kebalikan dari groove.
  • inset − Border membuat kotak terlihat seperti tertanam di halaman.
  • outset − Border membuat kotak terlihat seperti keluar dari kanvas.
  • hidden − Sama seperti tidak ada.

Properti border-style dapat memiliki dari satu sampai empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri).

Contoh Penggunaan properti border-style:

Hasil Penggunaan Properti border-style:

Hasil Penggunaan CSS Border Style

Hasil Penggunaan CSS Border Style

 

Cara Menggunakan CSS Border Width

Properti border-width memungkinkan kita untuk mengatur lebar batas elemen. Nilai properti ini dapat berupa panjang dalam satuan px, pt atau cm atau akan dibuat menjadi tipis, sedang atau tebal.

Kita dapat secara individual mengubah lebar border bawah, atas, kiri, dan kanan dari elemen menggunakan properti berikut ini:

  • border-bottom-width untuk mengubah lebar border bawah.
  • border-top-width untuk mengubah lebar border atas.
  • border-left-width untuk mengubah lebar border kiri.
  • border-right-width untuk mengubah lebar border kanan.

Contoh Kode:

Hasil Penerapan CSS Border Width:

Hasil Penggunaan CSS Border Width

Hasil Penggunaan CSS Border Width

Penggunaan border-width ini tidak dapat berdiri sendiri, jadi jika ingin menggunakan border-width, sebelumnya harus ditentukan properti border-style.

 

Cara Menggunakan CSS Border Color

Properti border-color memungkinkan kita untuk mengubah warna border di sekitar elemen. Kita dapat secara individual mengubah warna bagian bawah, kiri, atas, dan kanan border/batas elemen menggunakan properti-properti berikut:

  • border-bottom-color untuk mengubah warna border bawah.
  • border-top-color untuk mengubah warna border atas.
  • border-left-color untuk mengubah warna border kiri.
  • border-right-color untuk mengubah warna border kanan.

Contoh:

Hasil Penggunaan CSS Border Color:

Hasil Penggunaan CSS Border Color

Hasil Penggunaan CSS Border Color

 

Menggunakan Shorthand Property pada CSS Borders

Properti border memungkinkan kita untuk menentukan warna (color), gaya (style), dan lebar (width) border dalam satu properti.

Contoh:

Hasilnya menjadi seperti ini:

Hasil Penggunaan CSS Border Shorthand Property

Hasil Penggunaan CSS Border Shorthand Property

 

Demikian tuturial tentang CSS Borders. Semoga bermanfaat.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *