Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

CSS Borders vs Outline: Kapan Harus Menggunakan Masing-Masing?

Dalam CSS, garis tepi adalah elemen visual penting untuk memisahkan konten. Namun, browser memperlakukan border dan outline dengan cara yang sangat berbeda secara mekanis.

1. CSS Border (Garis Tepi Box Model)

Border adalah bagian integral dari Box Model elemen.

• Mengambil Ruang: Border dihitung dalam lebar dan tinggi total elemen (jika menggunakan box-sizing: content-box). Menambahkan border bisa menggeser elemen di sekitarnya.

• Mengikuti Radius: Border akan mengikuti kelengkungan yang dibuat oleh border-radius.

• Sisi Spesifik: Anda bisa mengatur hanya satu sisi (contoh: border-bottom).

2. CSS Outline (Garis Luar)

Outline adalah garis yang digambar di luar border elemen.

• Tidak Mengambil Ruang: Outline digambar di atas elemen. Ia tidak memengaruhi layout atau menggeser elemen tetangga.

• Garis Kaku: Secara tradisional, outline tidak mengikuti border-radius (berbentuk persegi), meskipun browser modern mulai mendukung kelengkungan pada outline.

• Keseluruhan: Outline selalu mengelilingi seluruh elemen; Anda tidak bisa memberikan outline-left saja.

• Offset: Memiliki properti khusus outline-offset untuk memberikan jarak antara border dan outline.

3. Tabel Perbedaan Utama

Tutorial: Implementasi Border dan Outline

Mari kita lihat bagaimana outline sangat berguna untuk navigasi keyboard dan debugging tanpa merusak layout.

Struktur HTML

<div class="container"> <button class="btn-border">Tombol Borderbutton> <button class="btn-outline">Tombol Outlinebutton>
div>

Kode CSS

button { pad ding: 10px 20px; cursor: pointer; border: none; /* Hapus border default browser */
} /* Menggunakan Border */
.btn-border:hover { /*  Menambah border saat hover akan menggeser teks di dalam tombol */ border: 5px solid #3498db;
} /* Menggunakan Outline */
.btn-outline:hover { /* Outline tidak akan menggeser apapun, hanya muncul di luar */ outline: 5px solid #e74c3c; outline-offset: 4px; /* Memberikan celah transparan */
} /* Best Practice: Aksesibilitas */
button:focus-visible { /* Memberikan tanda yang jelas bagi pengguna keyboard (TAB) */ outline: 3px solid black; outline-offset: 2px;
}

Kapan Menggunakan yang Mana?

1. Gunakan Border untuk:

   • Membangun struktur komponen (seperti card atau input field).

   • Memberikan garis bawah dekoratif pada teks.

   • Memisahkan kolom dalam tabel.

2. Gunakan Outline untuk:

   • Aksesibilitas (Paling Penting!): Memberikan indikator visual saat elemen dipilih melalui tombol TAB (state :focus).

   • Debugging: Saat Anda ingin melihat batas elemen tanpa merusak susunan tata letak yang sudah presisi.

   • Efek Desain Khusus: Menggunakan outline-offset untuk membuat efek garis ganda yang elegan.

Tips Pro: Jangan pernah menghapus outline focus (outline: none) tanpa memberikan pengganti visual yang setara, karena ini akan membuat website Anda sulit dinavigasi oleh pengguna yang menggunakan alat bantu atau keyboard.