Mengenal Border CSS

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.

Berikut adalah contoh penerapan properti untuk merubah warna border :


   
      
      
   
   
   
      

      Contoh ini akan menampilkan seluruh warna border berbeda.
      

      
      

      Contoh ini akan menampilkan warna border biru.

 

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.

berikut adalah contoh penerapan properti style.


   
   
   .
      

      Border ini dengan "none width".
      

      
      

      Border ini dengan "solid border".
      

      
      

      Border ini dengan "dahsed border".
      

      
      

      Border ini dengan "double border".
      

      
      

      Border ini dengan "groove border".
      

      
      

      Border ini dengan "ridge  border".
      

      
      

      Border ini dengan "inset border".
      

      
      

      Border ini dengan "outset border".
      

      
      

      Border ini dengan "hidden border".
      

      
      

      Border ini dengan 4 style yang berbeda.

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.

berikut contoh penggunaan properi border-width.


   
   
   
      

      Ini adalah border dengan style solid berukuran 4px.
      

      
      

      Ini adalah border dengan style solid berukuran 4px.
      

      
      

      Ini adalah border dengan style solid berukuran thin.
      

      
      

      Ini adalah border dengan style solid berukuran medium.
      

      
      

      Ini adalah border dengan style solid berukuran thick.
      

      
      

      Ini adalah border dengan style beragam style dan ukuran.

Properti Border Sebaris

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


   
   
   
      

      Penulisan border simple dalam satu baris.

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.

OK, materi border CSS kita sampai sini saja. Semoga bermanfaat...

 

 

Artikel Terkait

Populer

;