Border dan Outline CSS: Membuat Batas Elemen yang Menarik

Apa Itu Border dalam CSS?

Border atau batas adalah garis yang mengelilingi elemen HTML seperti kotak, teks, gambar, dan lainnya. Dengan border, kita bisa menyoroti elemen, memisahkan konten, atau memberikan efek visual yang menarik.

Selain border, ada juga outline, yaitu garis yang muncul di luar border — biasanya digunakan untuk indikasi fokus pada elemen seperti form input atau tombol.

---

1. Mengatur Border Dasar (border)

Properti border digunakan untuk menentukan tiga hal:

• Ketebalan (width)
• Gaya (style)
• Warna (color)

Contoh:

.kotak {
    border: 2px solid #333;
}

Penjelasan:

• 2px = ketebalan
• solid = gaya
• #333 = warna

---

2. Gaya Border (border-style)

Properti ini mengontrol bentuk dari garis border.

Nilai	Penjelasan
none	Tidak ada border
hidden	Sama seperti none
dotted	Garis titik-titik
dashed	Garis putus-putus
solid	Garis lurus
double	Dua garis lurus
groove	Efek terbenam
ridge	Efek timbul
inset	Efek masuk ke dalam
outset	Efek keluar dari latar belakang

Contoh:

.border-dash {
    border-style: dashed;
}

---

3. Ketebalan Border (border-width)

Menentukan seberapa tebal garis border.

Contoh:

.border-tebal {
    border-width: 5px;
}

Bisa juga berbeda untuk setiap sisi:

border-width: 1px 2px 3px 4px; /* top right bottom left */

Atau:

border-top-width: 2px;
border-right-width: 1px;

---

4. Warna Border (border-color)

Mengatur warna border. Bisa menggunakan nama warna, heksadesimal, RGB, RGBA, HSL, atau HSLA.

Contoh:

.border-biru {
    border-color: blue;
}

.border-transparan {
    border-color: rgba(0, 0, 0, 0.3);
}

Jika ingin warna berbeda tiap sisi:

border-color: red green blue yellow;
/* top right bottom left */

---

5. Mengatur Border Tiap Sisi Secara Terpisah

Anda bisa mengatur border tiap sisi secara spesifik:

border-top: 1px solid #000;
border-right: 2px dashed red;
border-bottom: 3px double blue;
border-left: 4px groove #444;

---

6. Membuat Sudut Melengkung dengan border-radius

Properti border-radius digunakan untuk membuat sudut elemen melengkung.

Contoh:

.kotak-bulat {
    border-radius: 10px;
}

Untuk lingkaran penuh:

.lingkaran {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

Bisa juga dengan dua nilai:

border-radius: 20px 10px; /* horizontal / vertical */

---

7. Shadow pada Border dengan box-shadow

Meskipun bukan bagian dari border, box-shadow sering digunakan bersama border untuk menambah dimensi.

Contoh:

.shadow-box {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

💡 Gunakan box-shadow untuk efek kartu (card), tombol, atau panel.

---

8. Properti outline – Garis Fokus di Luar Border

Berbeda dengan border, outline tidak termasuk dalam dimensi elemen dan biasanya digunakan untuk indikasi fokus saat pengguna mengetik di form atau menavigasi dengan keyboard.

Contoh:

input:focus {
    outline: 2px dashed blue;
}

Untuk menghilangkan outline default:

button:focus {
    outline: none;
}

⚠️ Jangan hilangkan outline tanpa pengganti visual yang jelas agar tetap ramah aksesibilitas.

---

Contoh Praktis

HTML

<div class="kartu">
    <h2>Kartu Informasi</h2>
    <p>Ini adalah contoh elemen dengan styling border.</p>
</div>

<input type="text" placeholder="Masukkan nama..." class="form-input">

CSS

.kartu {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-input {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    outline: none;
}

.form-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

Dengan kode ini, kita berhasil membuat kartu dengan border rapi dan form input dengan respons visual saat di-focus.

---

Tips dan Trik Efektif

• Gunakan border-radius untuk desain modern dan UI yang lembut.
• Kombinasikan border dan box-shadow untuk efek card yang profesional.
• Gunakan outline untuk meningkatkan aksesibilitas pada form.
• Hindari penghapusan outline tanpa pengganti visual yang jelas.
• Uji tampilan border di berbagai ukuran layar untuk konsistensi tampilan.

---

Kesimpulan

Border dan outline adalah alat penting dalam styling elemen web. Dengan properti seperti border-style, border-radius, box-shadow, dan outline, Anda bisa menciptakan elemen yang informatif, interaktif, dan menarik secara visual.

Selanjutnya, kita akan membahas Shadow Effects CSS, yaitu cara menambahkan dimensi dan kedalaman pada elemen dengan bayangan.

---

💡 Tips Praktis

• Gunakan shorthand border untuk penulisan yang lebih cepat dan rapi.
• Gunakan rgba() untuk warna border transparan.
• Simpan perubahan border dalam transisi untuk efek hover yang halus.
• Pastikan elemen tetap terlihat jelas meski tanpa warna (untuk pengguna buta warna).