DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

OUTLINE PADA CSS

Outline adalah batasan garis yang berada di luar border elemen

Setelah border, masih ada nilai yang bisa kita manipulasi yaitu OUTLINE.

Outline tidak menjadi bagian dari dimensi elemen. Total lebar dan tinggi elemen tidak terpengaruh oleh outline.

Contoh outline CSS

Berikut contoh menggunakan outline pada CSS

<style>
.p{
 border: 1px solid white;
 padding: 5px;
}
.outline {
  outline: blue solid 5px;
  padding: 10px;
  text-align: center;
}
</style>

<p class="p">Aku adalah tag p </p>
<p class="p outline">Aku adalah tag p dengan outline </p>

Aku adalah tag p

Aku adalah tag p dengan outline

Properti-properti dari outline

Outline bisa ditulis dengan satu baris seperti ini

outline: blue solid 5px;

atau spesifik berdasarkan fungsinya

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

Contoh mengubah Outline style

sama seperti border, kita bisa menggunakan nilai ini untuk mengubah gaya outline

- dashed
- dotted
- solid
- double
- groove
- ridge
- inset
- outset

Contoh

<style>
.p{
 border: 1px solid white;
 padding: 5px;
}
.outline-1 {
  outline: green dashed 5px;
  padding: 10px;
  text-align: center;
}
.outline-2 {
  outline: orange ridge 5px;
  padding: 10px;
  text-align: center;
}
</style>

<p class="p">Aku adalah tag p </p>
<p class="p outline-1">Aku adalah tag p dengan outline </p>
<p class="p outline-2">Aku adalah tag p dengan outline </p>

Aku adalah tag p

Aku adalah tag p dengan outline

Aku adalah tag p dengan outline

👈🏼 Margin pada CSS
Height dan Width pada CSS 👉🏼