Series Mahir CSS #9 : CSS Border

Halo lagi, teman-teman! Kali ini kita akan bahas sesuatu yang terlihat sederhana tapi bisa bikin desain webmu lebih menarik—border! Dengan border, kamu bisa menambahkan garis, bingkai, atau bahkan efek dekoratif lainnya di elemen HTML. Yuk, kita pelajari cara menggunakan properti border di CSS!

Apa Itu Border?

Border adalah garis yang mengelilingi elemen HTML. Dengan CSS, kamu bisa mengatur warna, ketebalan, jenis garis, hingga membuat bentuk seperti lingkaran atau sudut melengkung.

Properti Dasar Border

Ada tiga properti utama yang perlu kamu tahu:

1. border-width

   • Mengatur ketebalan border.
   • Nilai bisa berupa kata kunci seperti thin, medium, thick, atau nilai spesifik seperti 2px, 5px, dll.

   Contoh:

   div { 
        border-width: 3px; 
   }

2. border-style

   • Mengatur gaya garis border.
   • Pilihan:
     • solid: Garis penuh.
     • dashed: Garis putus-putus.
     • dotted: Garis titik-titik.
     • double: Garis ganda.
     • none: Tanpa border.

   Contoh:

   div { 
        border-style: dashed; 
   }

3. border-color

   • Mengatur warna border.
   • Bisa menggunakan nama warna, kode heksadesimal, RGB, atau HSL.

   Contoh:

   div { 
         border-color: red; 
   }

Kombinasi Properti

Kamu bisa menggabungkan properti di atas dengan shorthand:

div { 
     border: 3px solid blue; 
}

Artinya:

• border-width: 3px
• border-style: solid
• border-color: blue

Mengatur Border pada Sisi Tertentu

Kalau kamu cuma butuh border di satu sisi, gunakan properti ini:

• border-top
• border-right
• border-bottom
• border-left

Contoh:

div { 
      border-top: 5px solid green; 
      border-left: 3px dashed red; 
}

Membuat Sudut Melengkung dengan border-radius

Properti border-radius digunakan untuk membuat sudut elemen lebih halus atau bahkan membulat.

1. Bentuk sudut melengkung:

   div { 
         border: 2px solid black; 
         border-radius: 10px; 
   }

2. Bentuk lingkaran penuh:
   Untuk membuat elemen berbentuk lingkaran, gunakan 50% sebagai nilai.

   div { 
        border: 3px solid #3498db; 
        border-radius: 50%; 
        width: 100px; 
        height: 100px; 
   }

Efek Border dengan Animasi

Kalau mau lebih menarik, tambahkan animasi pada border!

Contoh Animasi Warna Border:

div { 
      border: 3px solid #3498db; 
      transition: border-color 0.3s ease; 
} 
div:hover { 
      border-color: #e74c3c; 
}

Contoh Border Bergelombang:

Gunakan properti border-image:

div { 
     border: 5px solid; 
     border-image: url('wave-pattern.png') 30 stretch;
 }

Tips Styling Border

1. Gunakan border yang konsisten: Jangan terlalu banyak variasi dalam satu halaman, biar desainnya tetap rapi.
2. Hati-hati dengan ketebalan border: Jangan terlalu tebal, supaya elemen lain tidak terlihat terlalu "sesak".
3. Kombinasikan dengan box-shadow: Border dan bayangan bisa bikin elemen terlihat lebih elegan.

Contoh:

div { 
     border: 2px solid #2ecc71; 
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

Sekianlah belajar CSS tentang border. Dengan menguasai properti ini, kamu bisa membuat elemen di websitemu terlihat lebih menarik dan profesional. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di pembahasan berikutnya, dan jangan lupa terus eksplorasi CSS! ?