Beranda / CSS / Pemrograman / Web

CSS Outline Width: Garis Pinggir yang Sering Diremehkan Tapi Punya Peran Penting! (Tutorial CSS Part 27)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 27 : Logo CSS

Kalau kamu udah sering main-main sama CSS, pasti udah gak asing lagi sama yang namanya border. Tapi gimana dengan outline? Nah, di artikel ini kita bakal bahas satu properti yang sering dilupakan tapi sebenernya punya peran penting, yaitu outline-width. Siap-siap kenalan lebih dekat sama dia, yuk!

Apa Itu Outline di CSS?

Sebelum masuk ke outline-width, kita perlu paham dulu apa itu outline.

Secara singkat, outline itu mirip kayak border, tapi punya beberapa perbedaan penting:

  • Outline nggak ngambil ruang di layout (alias gak ngaruh ke ukuran elemen).
  • Outline selalu ada di luar border.
  • Outline biasanya dipake buat highlight elemen, misalnya saat focus di input form.

Contoh penggunaan outline bisa kita temui waktu kamu pencet tab di form input, terus tiba-tiba ada garis biru yang muncul. Nah, itu kerjaannya si outline!

Fungsi outline-width

Nah, sekarang kita masuk ke topik utama: outline-width.

Properti outline-width dipake buat nentukan seberapa tebel si outline yang mau kita tampilkan. Simpel banget kan?

Sintaks:

selector {
  outline-width: value;
}

Nilai yang Bisa Digunakan:

Kamu bisa ngasih beberapa jenis nilai ke outline-width:

  1. Keyword:

    • thin (tipis)
    • medium (sedang – ini default-nya)
    • thick (tebal)

  2. Panjang Spesifik:

    • Bisa pake satuan panjang seperti px, em, rem, dll.
    • Contoh: 2px, 0.1em, 5pt

Contoh Penggunaan outline-width

Contoh 1: Pakai Keyword

button {
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

Hasilnya: Tombol bakal punya outline merah yang cukup tebal.

Contoh 2: Pakai Panjang Spesifik

input:focus {
  outline-style: dashed;
  outline-color: blue;
  outline-width: 3px;
}

Hasilnya: Waktu input difokusin (misalnya dengan klik atau tekan tab), outline biru putus-putus selebar 3px bakal muncul.

Kenapa Outline Itu Penting?

Meskipun keliatannya sepele, outline itu punya fungsi penting banget, terutama dari segi aksesibilitas (accessibility).

Outline biasanya muncul otomatis waktu elemen fokus. Ini penting banget buat pengguna yang navigasinya pakai keyboard. Kalau outline diilangin atau dimodifikasi tanpa mikirin UX, bisa-bisa website kamu jadi susah dipakai.

Jadi, sebelum kamu main-main sama outline, pastiin kamu tetap mikirin pengguna lain, ya!

Tips Saat Menggunakan outline-width

  1. Jangan lupa outline-style!
    Outline gak bakal muncul kalau kamu cuma set outline-width doang tapi lupa kasih outline-style. Minimal kasih outline-style: solid.

  2. Gunakan dengan bijak
    Outline bisa bantu nunjukin fokus atau status elemen. Tapi jangan overkill. Outline yang terlalu tebel atau warna ngejreng bisa ganggu kenyamanan mata.

  3. Beda dengan border!
    Jangan ketuker sama border. Border ngaruh ke layout, outline nggak. Jadi outline cocok buat efek highlight yang sementara atau dinamis.

Perbedaan border-width vs outline-width

Properti Pengaruh ke Layout Bisa Pakai Radius? Default Behavior
border-width Ya Ya (border-radius) Tidak otomatis
outline-width Tidak Tidak Muncul saat fokus

Contoh Internal CSS: Praktik Langsung di HTML

Supaya makin jelas, yuk kita lihat contoh sederhana gimana outline-width dipakai dalam internal CSS: 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Outline Width</title>
  <style>
    button {
      outline-style: solid;
      outline-color: orange;
      outline-width: 4px;
      padding: 10px 20px;
      font-size: 16px;
    }

    input:focus {
      outline-style: dotted;
      outline-color: green;
      outline-width: 3px;
    }
  </style>
</head>
<body>
  <h2>Contoh Outline Width di CSS</h2>
  <button>Klik Aku!</button><br><br>
  <input type="text" placeholder="Klik di sini untuk lihat outline">
</body>
</html>

Hasilnya:

Contoh CSS Outline Width
Gambar 27.1 : Contoh CSS Outline Width

Penjelasan:

  • Tombol (button) bakal punya outline oranye dengan ketebalan 4px.
  • Input field akan muncul outline hijau putus-putus (dotted) setebal 3px saat kamu klik atau fokusin elemen tersebut.

Kesimpulan

Properti outline-width mungkin jarang dipake kalau kamu nggak ngulik styling fokus atau highlight, tapi dia punya peran penting terutama buat aksesibilitas. Dengan memahami dan memanfaatkannya secara bijak, kamu bisa bikin tampilan web yang gak cuma keren tapi juga ramah pengguna.

Jadi, lain kali pas kamu styling form atau button, jangan lupa cek juga bagian outline-nya, ya. Siapa tahu bisa bikin UI kamu makin kece dan user-friendly!

Bonus Tips:
Kalau kamu pengen ngilangin outline tapi tetap jaga aksesibilitas, bisa ganti dengan visual cue lain (misal: ubah background atau kasih animasi halus), tapi pastikan pengguna keyboard tetap bisa lihat elemen mana yang sedang aktif.

Semoga artikel ini bantu kamu makin paham soal outline-width. Kalau ada properti CSS lain yang bikin kamu penasaran, tinggal komen aja ya. Kita bahas bareng-bareng! 🚀

Posting Komentar untuk "CSS Outline Width: Garis Pinggir yang Sering Diremehkan Tapi Punya Peran Penting! (Tutorial CSS Part 27)"