CSS Border

CSS Border adalah bagian penting dari CSS Box Model, yang berfungsi untuk memberikan garis pembatas di sekitar elemen HTML. Dengan border, kita bisa memperjelas batas elemen, memperindah tampilan, serta menciptakan gaya yang lebih menarik dan interaktif pada halaman web.

Struktur dan Properti Border

Border di CSS memiliki tiga properti utama yang dapat kita atur, yaitu:

1. Border-width – Menentukan ketebalan garis border.
2. Border-style – Menentukan gaya garis border, seperti solid, dotted, atau dashed.
3. Border-color – Menentukan warna garis border.

Contoh Penggunaan Border

Contoh penerapan pada elemen div:

div {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

Dalam contoh di atas:

• border-width: 2px; menentukan ketebalan garis sebesar 2 piksel.
• border-style: solid; membuat garis border berupa garis penuh.
• border-color: black; menentukan warna border menjadi hitam.

Border Shorthand

CSS memungkinkan penggunaan shorthand untuk menggabungkan ketiga properti tersebut dalam satu baris kode. Misalnya:

div {
  border: 2px solid black;
}

Gaya Border

CSS menyediakan berbagai gaya untuk border:

• solid – Garis penuh.
• dotted – Garis putus-putus berupa titik.
• dashed – Garis putus-putus berupa garis pendek.
• double – Dua garis sejajar.
• groove – Garis 3D yang tampak seperti ukiran.
• ridge – Mirip groove, tetapi menonjol.
• inset – Efek tertekan ke dalam.
• outset – Efek terangkat keluar.

Contoh pengaturan gaya border dashed:

div {
  border: 2px dashed blue;
}

Border Per-Sisi

Kita bisa mengatur border pada setiap sisi elemen secara terpisah menggunakan:

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

Contoh:

div {
  border-top: 5px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px double blue;
  border-left: 1px solid black;
}

Border-Radius

Selain garis lurus, kita juga dapat membuat sudut border menjadi melengkung menggunakan border-radius. Misalnya:

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

Properti border-radius ini akan menghasilkan sudut yang melengkung, cocok untuk tampilan modern dan elegan.

Kesimpulan

CSS Border memberikan fleksibilitas tinggi dalam mendesain garis pembatas elemen. Dengan pengaturan ketebalan, warna, dan gaya border yang bervariasi, serta kemampuan untuk membentuk sudut yang melengkung, kita bisa memperkaya tampilan web dan memandu perhatian pengguna secara visual.