Mengenal Border CSS

Border dalam CSS berfungsi untuk membuat garis tepi sebuah objek HTML. Kita akan membahas border pada materi ini lebih detail lagi.

Properti border pada CSS membuat garis tepi pada objek HTML kita. Secara gelobal terdapat 3 properti untuk border:

  1. border-color – spesifik untuk warna border.
  2. border-style – jenis border, seperti : solid, dashed line, double line
  3. border-width – spesifik untuk ketebalan garis border.

Sekarang kita akan melihat lebih detail dari beberapa properti diatas.

Properti border-color

properti ini memperbolehkan kita untuk merubah warna dari border. Anda bisa merubah warna secara keseluruhan ataupun hanya sebagian (garis atas, kanan, bawah atau kiri). untuk merubah warna sebagian sebagai berikut:

  • border-bottom-color digunakan untuk merubah warna border bagian bawah.
  • border-top-color digunakan untuk merubah warna border bagian atas.
  • border-left-color digunakan untuk merubah warna border bagian kiri.
  • border-right-color digunakan untuk merubah warna border bagian kanan.

Properti border-style

Pada properti border-style ini, Anda diperbolehkan memilih style / jenis garis yang hendak Anda pakai. Berikut adalah beberapa style yang bisa Anda pilih :

  • none : Tidak ada border. (atau sama dengan border-width:0;).
  • solid : Border single (tunggal) dan padat seperti garis menggunakan bolpoint.
  • dotted : Border dalam bentuk titik-titik.
  • dashed : Border dalam bentuk garis-garis pendek.
  • double : Border dalam bentuk 2 garis solid/padat.
  • groove : Border tampak seolah-oleh berukir.
  • ridge : Border tampak seperti lawan dari groove.
  • inset : Border membuat kotak seperti tertanam di halaman.
  • outset : Border tampak menonjol keluar.
  • hidden : Sama seperti none.

Anda juga bisa memberikan style border secara individu, misalkan untuk atas, kanan, bawah dan kiri hendak memiliki style yang berbeda menggunakan properti berikut:

  • border-bottom-style merubah style untuk border sisi bawah.
  • border-top-style merubah style untuk border sisi atas.
  • border-left-style merubah style untuk border sisi kiri.
  • border-right-style merubah style untuk border sisi  kanan.

Properti border-width

Dengan properti border-with kita bisa mengatur tingkat ketebalan border yang akan kita pakai. Nilai ketebalan border yang bisa kita gunakan px, pt atau cm. Kita juga bisa menggunakan thin, medium atau thick.

Sama seperti properti lain, border-width juga dapat dilakukan untuk sisi atas, kanan, bawah dan kiri.

  • border-bottom-width merubah ukuran border sisi bawah.
  • border-top-width merubah ukuran border sisi atas.
  • border-left-width merubah ukuran border sisi kiri.
  • border-right-width merubah ukuran border sisi kanan.

Properti Border Sebaris

Kamu juga bisa menulis kode CSS border dalam format yang lebih simple. Berikut contoh border yang simple.

Pada contoh diatas, kita bisa menulis langung isi / nilai dari properti border. Kita tidak tulis nama properti lagi, melainkan langsung menulis value dari properti tersebut.