CSS Outline

CSS outline adalah properti yang digunakan untuk membuat garis luar (outline) pada elemen HTML. Garis ini serupa dengan border, namun tidak mempengaruhi ukuran elemen. Outline biasanya digunakan untuk menyorot elemen yang sedang dipilih atau difokuskan.

1. Menambahkan Outline

Untuk menambahkan outline pada elemen, Anda bisa menggunakan properti outline yang terdiri dari tiga bagian:

1. Warna (Color): Menentukan warna outline.
2. Gaya (Style): Menentukan gaya garis outline (misalnya, solid, dashed, atau dotted).
3. Lebar (Width): Menentukan ketebalan outline.

Contoh penggunaan:

div {
  outline: 3px solid red;
}

2. Menggunakan Properti outline-color, outline-style, dan outline-width

Sebagai alternatif, Anda bisa mengatur warna, gaya, dan lebar outline menggunakan properti terpisah.

Contoh outline-color

div {
  outline-color: blue;
}

Contoh outline-style

div {
  outline-style: dashed;
}

Contoh outline-width

div {
  outline-width: 5px;
  outline-color: blue;
  outline-style: solid;
}

3. Menggunakan outline-offset

Properti outline-offset memungkinkan Anda untuk menambahkan jarak antara outline dan elemen yang dilingkupi. Nilai positif akan membuat outline lebih jauh dari elemen, sedangkan nilai negatif akan membuatnya lebih dekat ke elemen.

Contoh penggunaan:

div {
  outline: 2px solid green;
  outline-offset: 10px;
}

4. Perbedaan antara Outline dan Border

Meskipun outline dan border serupa, mereka memiliki beberapa perbedaan:

• Outline tidak mempengaruhi layout atau ukuran elemen.
• Border mempengaruhi ukuran elemen dan dapat mempengaruhi tata letak di sekitarnya.

Contoh perbedaan antara Outline dan Border

div.border {
  border: 3px solid red;
}
 
div.outline {
  outline: 3px solid blue;
}

5. Menggunakan Outline dengan Fokus

Outline sering digunakan untuk menyorot elemen yang sedang difokuskan, seperti input atau tombol yang dipilih oleh pengguna.

Contoh penggunaan pada elemen input:

input:focus {
  outline: 2px solid #4CAF50;
}