Abd. Asis

Di bab sebelumnya, Box Model mengajarkan bahwa setiap elemen punya empat lapisan: content, padding, border, dan margin. Tapi ada satu lapisan lagi yang tidak termasuk dalam Box Model — outline. Ia berada di luar border, tapi tidak mengambil ruang apapun di layout.

Perbedaan itu bukan detail kecil. Inilah yang membuat outline punya peran berbeda dari border, dan mengapa keduanya tidak bisa saling menggantikan begitu saja.

Outline vs Border

Sekilas, outline dan border terlihat serupa — keduanya menggambar garis di sekitar elemen. Tapi cara mereka bekerja sangat berbeda.

Border adalah bagian dari Box Model. Ia menambah ukuran elemen dan mempengaruhi layout di sekitarnya. Outline tidak. Outline digambar di luar border tanpa menambah ukuran elemen, tanpa menggeser elemen lain, dan tanpa mempengaruhi perhitungan ruang sama sekali.

	Border	Outline
Posisi	Di dalam Box Model	Di luar border, di luar Box Model
Pengaruh ke layout	Menambah ukuran elemen	Tidak ada
Bisa per sisi	Ya (`border-top`, `border-left`, dll)	Tidak, selalu mengelilingi semua sisi
Bisa `border-radius`	Ya	Tergantung browser, tidak selalu

Karena outline tidak mempengaruhi layout, ia sering digunakan untuk keperluan debugging dan aksesibilitas — dua konteks di mana kamu ingin memberi tanda visual tanpa menggeser apapun.

Browser secara default menampilkan outline pada elemen yang sedang dalam fokus (misalnya saat pengguna menekan Tab untuk berpindah antar elemen form). Inilah fitur aksesibilitas yang sangat penting — jangan hapus outline tanpa menyediakan pengganti visualnya.

outline-style

Sebelum properti outline lain bisa bekerja, outline-style harus ditetapkan terlebih dahulu. Tanpanya, outline tidak akan terlihat meskipun kamu sudah mengatur warna atau ketebalan.

Nilai yang tersedia sama dengan border-style:

/* portofolio.css */
.kotak-demo { width: 200px; padding: 16px; margin: 20px; }

.outline-dotted  { outline-style: dotted; }
.outline-dashed  { outline-style: dashed; }
.outline-solid   { outline-style: solid; }
.outline-double  { outline-style: double; }
.outline-groove  { outline-style: groove; }
.outline-ridge   { outline-style: ridge; }
.outline-inset   { outline-style: inset; }
.outline-outset  { outline-style: outset; }

Dari semua nilai itu, solid dan dashed adalah yang paling sering dipakai dalam praktik nyata. dotted kadang muncul untuk state fokus di beberapa design system.

Ini berbeda dari border — pada border, jika kamu tidak menetapkan border-style, properti lain seperti border-width dan border-color tetap bisa ditulis tapi tidak akan terlihat. Pada outline, perilakunya sama: outline-style wajib ada agar outline muncul.

outline-width

outline-width mengatur ketebalan outline. Nilainya bisa berupa satuan panjang (px, em) atau kata kunci bawaan.

/* portofolio.css */
.fokus-tipis {
  outline-style: solid;
  outline-width: thin;     /* setara ~1px */
}

.fokus-sedang {
  outline-style: solid;
  outline-width: medium;   /* setara ~3px, nilai default */
}

.fokus-tebal {
  outline-style: solid;
  outline-width: thick;    /* setara ~5px */
}

.fokus-custom {
  outline-style: dashed;
  outline-width: 3px;
}

Dalam praktik, nilai piksel lebih banyak digunakan karena hasilnya lebih terprediksi dibanding kata kunci yang interpretasinya bisa berbeda antar browser.

outline-color

outline-color mengatur warna outline. Semua format warna CSS yang sudah kamu pelajari di Bab 8 berlaku di sini — nama warna, HEX, RGB, HSL, semuanya valid.

/* portofolio.css */
.kotak-biru {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #3b82f6;
}

.kotak-merah {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: rgb(239, 68, 68);
}

Ada satu nilai khusus yang hanya ada di outline-color: invert. Nilainya membalik warna piksel di bawah outline sehingga outline selalu terlihat kontras apapun warna background-nya. Sayangnya dukungan browser untuk invert tidak konsisten, jadi lebih aman menggunakan warna eksplisit.

Shorthand outline

Seperti border, properti outline punya shorthand yang menggabungkan style, width, dan color dalam satu deklarasi.

/* portofolio.css */

/* outline: [width] [style] [color] */
.tombol-aksi {
  outline: 3px solid #3b82f6;
}

.input-form {
  outline: 2px dashed #94a3b8;
}

/* Menghilangkan outline sepenuhnya */
.tanpa-outline {
  outline: none;
}

Urutan nilai dalam shorthand fleksibel — browser bisa mengenali ketiganya dalam urutan apapun. Tapi konvensi [width] [style] [color] adalah yang paling umum dan mudah dibaca.

outline-offset

outline-offset adalah properti yang tidak dimiliki border: kemampuan memberi jarak antara outline dan tepi elemen. Nilainya bisa positif (menjauhi elemen) atau negatif (mendekati elemen, bahkan masuk ke dalam).

/* portofolio.css */
.kartu-artikel {
  width: 280px;
  padding: 20px;
  border: 2px solid #e2e8f0;
  outline: 3px solid #3b82f6;
  outline-offset: 6px;   /* outline 6px di luar border */
}

.badge-status {
  padding: 4px 12px;
  background-color: #f0fdf4;
  outline: 2px dashed #22c55e;
  outline-offset: -4px;  /* outline masuk ke dalam elemen */
}

Kombinasi outline dan outline-offset positif menciptakan efek "double frame" yang sering digunakan untuk state fokus yang lebih elegan dibanding outline yang menempel langsung ke border.

Penggunaan Praktis Outline

Outline paling sering muncul dalam dua konteks nyata: state fokus elemen interaktif, dan debugging layout.

Untuk state fokus, browser menampilkan outline secara otomatis. Kamu bisa mengkustomisasinya tanpa menghapusnya:

/* portofolio.css */

/* Kustomisasi fokus tanpa menghilangkan aksesibilitas */
.tombol-kirim:focus {
  outline: 3px solid #6366f1;
  outline-offset: 4px;
}

/* Hanya sembunyikan outline saat navigasi mouse, bukan keyboard */
.tombol-kirim:focus:not(:focus-visible) {
  outline: none;
}

Untuk debugging, outline lebih praktis dari border karena tidak menggeser layout:

/* debugging sementara — lihat di mana elemen berada */
* {
  outline: 1px solid red;
}

Tambahkan itu sementara ke stylesheet kamu saat layout terasa aneh. Setiap elemen akan terlihat kotak merahnya tanpa ada pergeseran layout — jauh lebih bersih daripada menambah border sementara yang bisa mengubah spacing.

Latihan

Eksperimen berikut menggabungkan outline dengan konsep border dari Bab 10 dan Box Model dari bab sebelumnya:

Buat sebuah <div> dengan padding: 24px, border: 3px solid #334155, dan width: 260px. Tambahkan outline: 4px dashed #3b82f6 dan outline-offset: 8px. Buka DevTools — berapa lebar total elemen yang terhitung? Apakah outline masuk ke kalkulasi?
Buat dua tombol <button> bersebelahan. Tambahkan :focus style pada keduanya, tapi dengan pendekatan berbeda: satu menggunakan outline dengan outline-offset, satu menggunakan box-shadow sebagai alternatif outline. Tekan Tab di browser untuk berpindah fokus antar tombol — mana yang terlihat lebih baik?
Coba terapkan * { outline: 1px solid tomato; } sementara ke halaman portofolio kamu. Amati elemen mana yang muncul kotak merahnya — apakah ada elemen yang posisinya berbeda dari yang kamu perkirakan?

Dengan outline, kamu sudah melihat semua properti yang berkaitan dengan "kotak" di sekitar elemen: margin, border, padding, dan sekarang outline. Selanjutnya perhatian beralih ke dalam elemen itu sendiri — bagaimana teks ditampilkan, diwarnai, diratakan, dan didekorasi.

BAB 15: Outline CSS

Outline vs Border

outline-style

outline-width

outline-color

Shorthand outline

outline-offset

Penggunaan Praktis Outline

Latihan

Referensi