Beranda / CSS / Pemrograman / Web

CSS Outline - Shorthand (Tutorial CSS Part 29)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 29 : Logo CSS

Pernah lihat elemen HTML kayak tombol atau input yang punya garis pinggir (outline) pas diklik? Nah, garis itu bisa kita atur lewat properti CSS yang namanya outline. Tapi biar nggak ribet nulis satu-satu kayak outline-width, outline-style, dan outline-color, kita bisa pakai shorthand alias jalan pintas.

🔍 Apa Itu CSS Outline Shorthand?

outline dalam CSS bisa ditulis satu baris aja. Shorthand ini nggabungin tiga properti jadi satu:

  • outline-width
  • outline-style
  • outline-color

Jadi kamu bisa bikin gaya garis pinggir yang keren cuma dalam satu baris kode!

📦 Format Penulisan

outline: [width] [style] [color];

Contoh:

outline: 2px dashed red;

Artinya:

  • Lebar outline: 2px
  • Gaya garis: dashed (putus-putus)
  • Warna garis: merah

Kamu juga boleh nulis dua aja, misal:

outline: solid blue;

Ini otomatis pakai lebar default (biasanya medium).

💡 Properti-properti yang Bisa Dipakai

Properti Contoh Keterangan
outline-width 1px, thin, medium, thick Lebar garis
outline-style solid, dashed, dotted, double Jenis garis
outline-color red, #00ff00, rgb(0,0,255) Warna garis

⚙️ Contoh Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Outline Shorthand</title>
  <style>
    .box {
      padding: 20px;
      outline: 3px dotted green;
    }

    .box:hover {
      outline: 3px solid red;
    }
  </style>
</head>
<body>
  <div class="box">
    Hover aku buat lihat perubahan outline!
  </div>
</body>
</html>

Hasilnya:

Contoh CSS Outline
Gambar 29.1 : Contoh CSS Outline

Di contoh di atas:

  • Saat normal: outline hijau, dotted.
  • Saat hover: outline berubah jadi merah solid.

❗ Perbedaan dengan border

Jangan bingung ya! outline beda sama border:

Outline Border
Tidak mempengaruhi ukuran elemen Ikut dihitung dalam ukuran elemen
Bisa berada di luar border Selalu di dalam elemen
Cocok untuk efek fokus atau hover Umumnya buat style permanen

🎯 Kapan Sebaiknya Pakai Outline?

  • Buat efek fokus di form input tanpa menggeser layout.
  • Untuk aksesibilitas — outline muncul otomatis saat fokus pakai keyboard.
  • Saat butuh garis pinggir yang tidak mengganggu ukuran box.

✍️ Penutup

outline itu simpel tapi powerful. Dengan shorthand, kamu bisa ngatur lebar, gaya, dan warna outline dalam satu baris aja. Nggak perlu ribet-ribet nulis tiga baris. 

outline: 2px dashed orange;

Dan boom! Elemenmu langsung punya highlight kece.

Kamu suka trik CSS kayak gini? Yuk eksplor juga border, box-shadow, dan efek-efek keren lain biar desainmu makin hidup!

Posting Komentar untuk "CSS Outline - Shorthand (Tutorial CSS Part 29)"