Border Pada CSS

Border pada CSS digunakan untuk membuat garis tepi pada elemen HTML. Border sering dipakai untuk membatasi kotak, tombol, gambar, tabel, card, form, dan bagian layout lainnya.

Dengan border, tampilan halaman web menjadi lebih rapi. Elemen juga terlihat lebih jelas karena memiliki batas visual.

Pengertian Border Pada CSS

Border adalah properti CSS yang berfungsi untuk memberi garis pada sisi luar elemen. Garis ini bisa diatur dari segi ketebalan, warna, bentuk, dan posisi sisinya.

Secara umum, border CSS memiliki tiga bagian utama, yaitu:

• border-width, untuk mengatur ketebalan garis.
• border-style, untuk mengatur bentuk garis.
• border-color, untuk mengatur warna garis.

Struktur Dasar Border CSS

Penulisan border pada CSS dapat dibuat dengan cara singkat seperti berikut:

selector {
  border: ukuran jenis warna;
}

Contoh penggunaannya:

div {
  border: 2px solid black;
}

Kode di atas berarti elemen div memiliki border dengan ketebalan 2px, jenis garis solid, dan warna hitam.

Contoh Border Pada HTML dan CSS

Perhatikan contoh HTML berikut:

<div class="kotak">
  Ini adalah contoh border pada CSS.
</div>

Kemudian tambahkan kode CSS berikut:

.kotak {
  width: 300px;
  padding: 20px;
  border: 2px solid blue;
}

Hasilnya, elemen tersebut akan tampil sebagai kotak dengan garis tepi berwarna biru.

Jenis-Jenis Border Style Pada CSS

Properti border-style digunakan untuk menentukan bentuk garis border. CSS menyediakan beberapa jenis border yang bisa digunakan.

.solid {
  border: 2px solid black;
}

.dashed {
  border: 2px dashed black;
}

.dotted {
  border: 2px dotted black;
}

.double {
  border: 4px double black;
}

Keterangan dari kode di atas:

• solid, membuat garis lurus biasa.
• dashed, membuat garis putus-putus.
• dotted, membuat garis titik-titik.
• double, membuat garis ganda.

Mengatur Ketebalan Border

Ketebalan border dapat diatur menggunakan properti border-width. Nilainya bisa menggunakan satuan px, em, rem, atau nilai bawaan seperti thin, medium, dan thick.

.kotak {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

Contoh di atas membuat border dengan ketebalan 5px, jenis garis solid, dan warna merah.

Mengatur Warna Border

Warna border dapat diatur menggunakan properti border-color. Nilainya bisa berupa nama warna, kode hex, rgb, atau rgba.

.kotak {
  border: 3px solid #3498db;
}

Pada contoh tersebut, border menggunakan warna biru dengan kode hex #3498db.

Mengatur Border Pada Sisi Tertentu

CSS juga memungkinkan kita memberi border hanya pada sisi tertentu. Misalnya hanya sisi atas, kanan, bawah, atau kiri.

.atas {
  border-top: 3px solid red;
}

.kanan {
  border-right: 3px solid green;
}

.bawah {
  border-bottom: 3px solid blue;
}

.kiri {
  border-left: 3px solid orange;
}

Teknik ini sering digunakan untuk membuat garis bawah pada judul, tanda aktif pada menu, atau penanda khusus pada sebuah elemen.

Membuat Sudut Border Melengkung

Untuk membuat sudut border menjadi melengkung, gunakan properti border-radius.

.kotak {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
}

Semakin besar nilai border-radius, semakin melengkung sudut elemen tersebut.

Contoh Border Untuk Tombol

Border juga sering digunakan pada tombol agar tampil lebih menarik.

<button class="tombol">Klik Saya</button>

.tombol {
  padding: 10px 20px;
  border: 2px solid #2980b9;
  border-radius: 6px;
  background-color: white;
  color: #2980b9;
  cursor: pointer;
}

.tombol:hover {
  background-color: #2980b9;
  color: white;
}

Kode di atas membuat tombol dengan border biru. Saat kursor diarahkan ke tombol, warna background berubah menjadi biru dan teks menjadi putih.

Contoh Border Untuk Gambar

Border juga dapat diterapkan pada gambar. Contohnya seperti berikut:

<img src="gambar.jpg" alt="Contoh Gambar" class="gambar-border">

.gambar-border {
  width: 300px;
  border: 4px solid #555;
  border-radius: 12px;
}

Contoh tersebut membuat gambar memiliki garis tepi abu-abu dan sudut yang melengkung.

Perbedaan Border, Margin, dan Padding

Dalam CSS, border sering berhubungan dengan margin dan padding. Ketiganya memiliki fungsi yang berbeda.

• Padding adalah jarak antara isi elemen dan border.
• Border adalah garis tepi elemen.
• Margin adalah jarak antara elemen dengan elemen lainnya.

Contoh sederhananya:

.kotak {
  margin: 20px;
  padding: 15px;
  border: 2px solid black;
}

Pada contoh di atas, elemen memiliki jarak luar 20px, jarak dalam 15px, dan garis tepi 2px.

Kesimpulan

Border pada CSS berfungsi untuk memberi garis tepi pada elemen HTML. Border dapat diatur dari segi ketebalan, jenis garis, warna, sisi tertentu, dan bentuk sudutnya.

Properti border sangat penting dalam pembuatan tampilan website. Dengan memahami border, kita dapat membuat elemen seperti kotak, gambar, tombol, form, dan layout menjadi lebih rapi dan menarik.

Beberapa properti penting yang perlu dipahami adalah border, border-width, border-style, border-color, border-top, border-right, border-bottom, border-left, dan border-radius.